JS监听scroll获取滚动区域中显示的DIV

发表于 | 分类于
JS监听scroll获取滚动区域中显示的DIV

获取滚动到的位置

要获取一个包含多个<div>元素的容器中现在滚动到哪一个<div>了，您可以使用以下代码来实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
scrollListener() {
  const container = document.querySelector('.left_menu');
  const divs = container.querySelectorAll('.left_menu_item');
  container.addEventListener('scroll', () => {
    let currentDiv = null;
    let currentDivTop = Infinity;
    for (const div of divs) {
      const divTop = div.getBoundingClientRect().top;
      if (divTop >= 0 && divTop < currentDivTop) {
        currentDivTop = divTop;
        currentDiv = div;
      }
    }
    if (currentDiv) {
      this.menu_index = parseInt(currentDiv.dataset.index);
    }
  });
},

页面中

1
2
3
4
<div class="left_menu">
    <div v-for="(menu_group,index) in left_menu" :key="index" :data-index="index" class="left_menu_item">
    </div>
</div>

滚动到指定位置

1
2
3
4
5
6
7
scrollToDiv(menu_index) {
  const container = document.querySelector('.left_menu');
  const divs = container.querySelectorAll('.left_menu_item');
  let div = divs[menu_index];
  container.scrollTop = div.offsetTop;
  this.menu_index = menu_index;
},

注意容器一定要设置position属性，否则获取到的offsetTop不正确。

1
2
3
4
.left_menu {
  overflow-y: auto;
  position: relative;
}

data-xxx

要获取一个<div>元素中的data-xxx属性的值，您可以使用以下代码：

1
2
const div = document.getElementById('myDiv');
const value = div.dataset.xxx;

在这里，xxx是您要获取的data-xxx属性的名称，例如，如果<div>元素有一个data-index="1"的属性，您可以使用dataset.index来获取它的值。

请注意，您必须使用dataset属性来访问data-xxx属性的值。如果尝试直接访问属性（例如，使用div.data-index），您将得到undefined值。

如果您使用的是ES6或更高版本的JavaScript，您还可以使用解构语法来获取data-xxx属性的值，例如：

1
const { xxx } = document.getElementById('myDiv').dataset;

这将创建一个名为xxx的变量，并将其设置为data-xxx属性的值。