隐藏溢出y时如何找到隐藏的第一个元素？

Question

I have a container div and multiple child elements. And have set overflow-y hidden for the container. Now I would like to find the first element which is hidden through vanilla javascript

I have tried getting computed property of the child element to see whether they have display -> none. all of them are block.

calView() {
    const wrapper = document.querySelector(".chunks-bar-wrapper");
    const fourthElement = wrapper.querySelector('div[data-id="4"]');
    console.log(fourthElement);
    console.log(window.getComputedStyle(fourthElement));
  }
  componentDidMount() {
    window.addEventListener("resize", this.calView);
  }
  componentWillMount() {
    window.removeEventListener("resize", this.calView);
  }
  render() {
    const { labelList } = this.props;
    return (
      <div className="wrapper">
        {labelList.map((label, index) => (
          <div className="tab" key={index} data-id={index}>
            {label}
          </div>
        ))}
      </div>
    );
  }

Answer 1

You should call getBoundingClientRect on your element, you can also use refs to get control of your rects:

Quick fix:

calView() {
    const wrapper = document.querySelector(".chunks-bar-wrapper");
    const fourthElement = wrapper.querySelector('div[data-id="4"]');
    console.log(fourthElement);
    console.log(fourthElement.getBoundingClientRect());
}

Using refs:

constructor() {
    ...
    this.elRefs = {};
    ...
}

calView() {
    const fourthElement = this.refs[4];
    console.log(fourthElement);
    console.log(fourthElement.getBoundingClientRect());
}

render() {
    const { labelList } = this.props;
    return (
      <div className="wrapper">
        {labelList.map((label, index) => (
          <div key={index} ref={(el) => { this.refs[index] = el; }} className="tab">
            {label}
          </div>
        ))}
      </div>
    );
}