获取滚动到的位置
要获取一个包含多个<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属性的值。