隱藏溢出y時如何找到隱藏的第一個元素？

Question

我有一個容器div和多個子元素。 並為容器設置了溢出y。 現在，我想找到通過香草javascript隱藏的第一個元素

我嘗試獲取子元素的計算屬性，以查看它們是否具有顯示->無。 他們都是被封鎖的。

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

您應該在元素上調用getBoundingClientRect，也可以使用refs來控制自己的rect：

快速解決：

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

使用參考：

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>
    );
}