title: How to find the first element hidden when overflow-y is hidden?
body: <p>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</p>
  
  <p>I have tried getting computed property of the child element to see whether they have display -> none. all of them are block.</p>
  
  <pre><code>
  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 (
        &lt;div className="wrapper"&gt;
          {labelList.map((label, index) =&gt; (
            &lt;div className="tab" key={index} data-id={index}&gt;
              {label}
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      );
    }
  </code></pre>