javascript - 如何根据您所在的当前时间使水平线向上或向下移动？

Question

我正在尝试找到一种方法来在我的 DIV 顶部创建一条水平线，该水平线根据我们所处的当前时间上下移动。

这是我目前的状态：

这就是我想要实现的（基本上是那条小绿线，它会根据你所处的时间上下移动，我不知道如何将它与左边的时间联系起来，因为它是代码中的地图功能下面，或者如果我应该独立做或有其他方式。任何线索将不胜感激：）

这些是我的组件：

这是我的索引代码：

export default function TimeLineIndex() {
  const [activeMonth, setActiveMonth] = useState(new Date().getMonth());

  return (
    <TimeLineIndexContainer>
      <Nav>
        <DateAndIcons>
          <h1>
            
            {` ${DATE.getUTCDate()} ${
              MONTH[activeMonth]
            } ${DATE.getFullYear()}`}
          </h1>
          <h1> X X {" | "} X</h1>
        </DateAndIcons>
        <MainTimeLineLine>
          <hr></hr>
        </MainTimeLineLine>
      </Nav>
      <Cards>
        <TimeEntry>
          <div className="title">
            <h4 style={{ color: "black", fontWeight: "normal" }}>Time Entry</h4>
          </div>
          <div className="intervalQuantity">
            <h4>Interval/Quantity</h4>
          </div>
        </TimeEntry>
        <Calendar>
          <div className="calendarOption">
            <h4>Calendar</h4>
          </div>
          <div className="suggestions">
            <h4>Mærkedagskalender</h4>
          </div>
        </Calendar>
      </Cards>
      <TimeLineContainer>
        {HOURS.map((hour, key) => (
          <HoursComponent hour={hour} key={key} />
        ))}
      </TimeLineContainer>
    </TimeLineIndexContainer>
  );
}
// STYLES

const TimeLineIndexContainer = styled.div`
  height: 98vh;
  margin-left: 10px;
  border-radius: 10px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  overflow: hidden;
`;
const Nav = styled.div`
  background-color: white;
  width: 100%;
  color: #20b295;
  /* background-color: #196262; */
  color: black;
  padding: 0px 20px;
`;
const DateAndIcons = styled.div`
  display: flex;
  justify-content: space-between;
`;
const MainTimeLineLine = styled.div`
  width: 100%;
  margin: auto;
  text-align: center;
  font-size: 12px;
  &.hr {
    border: -1.9px solid;
  }
`;

const TimeLineContainer = styled.div`
  width: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  height: 81vh;
  overflow: scroll;
  scroll-snap-type: proximity;
  scroll-snap-type: y proximity;
  flex: 1;
`;

///////////////////////////////////////
const Cards = styled.div`
  display: flex;
  justify-content: space-between;
  padding: 20px;
  margin-left: 0px;
  background-color: white;
`;
const TimeEntry = styled.div`
  display: flex;
  justify-content: space-between;
  width: 49%;
  padding: 20px;
  background-color: #f2f1f3;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #20b295;
`;
const Calendar = styled.div`
  display: flex;
  justify-content: space-between;
  width: 48%;
  padding: 20px;
  background-color: #f2f1f3;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  color: #20b295;
`;

这是在图片左侧列出小时的 DIV：

const HoursComponent = (props) => {
  return (
    <TimeBlock>
      <Container style={{ marginRight: "10px" }}>
        <Times>{props.hour}</Times>
        <QuantityComponent />
      </Container>
      <Container>
        <CalendarViewComponent />
      </Container>
    </TimeBlock>
  );
};

const TimeBlock = styled.div`
  display: flex;
  width: 100%;
  justify-content: space-between;
`;

const Times = styled.div`
  text-align: center;
  color: #939393;
  padding: 20px;
  font-size: 12px;
`;

const Container = styled.div`
  display: flex;
  width: 48%;
`;

export default HoursComponent;

这些是 DIV 中的水平线：

const QuantityComponent = (props) => {
  return (
    <LineQuantityDiv>
      <hr></hr>
    </LineQuantityDiv>
  );
};

const LineQuantityDiv = styled.div`
  width: 100%;
  margin: auto;
  margin-left: 0px;
  &.hr {
    border: -1.9px solid;
  }
`;

标签： javascriptcssreactjsreact-native