如何保存滚动位置和实现横向滚动

Posted on Wed, 25 Dec 2024 16:15:06 +0800 by LiangMingJian

需求 #

滚动条能在界面刷新后保存滚动位置，且滚动条支持横向滚动。

难点 #

由于滚动事件scroll不会冒泡 DOM，因此用户无法使用 $('body').on('scroll', 'div.dxgvHSDC + div', function () { })来绑定事件，所以滚动事件必须直接绑定在对应元素上。

实现滚动位置的保存 #

滚动位置可以使用会话储存 session 来记录，使用以下代码记录滚动位置。

$('.nav-list').scroll(function() {
    sessionStorage.setItem('scrollTop-b', $('.nav-list').scrollTop());
});

if(sessionStorage.getItem('scrollTop-b') != "undefined"){
    $('.nav-list').scrollTop(sessionStorage.getItem('scrollTop-b'));
};

实现横向滚动 #

let container = document.querySelector(".container");
container.addEventListener("wheel", (event) => {
    event.preventDefault();   # 阻止默认的滚动事件
    container.scrollLeft += event.deltaY;   # 横向滚动
});