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

Question

我有一个容器 div 和多个子元素。并为容器设置了overflow-y hidden。现在我想找到通过 vanilla 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 来控制你的矩形：

快速修复：

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