鼠标事件滚动条保留位置

可以使用JavaScript监听滚动事件，记录当前滚动条的位置，然后在页面重新渲染后再将滚动条滚动到记录的位置。

具体的实现方法如下：

1. 在页面加载时，记录当前滚动条的位置，可以使用 `window.scrollY` 或 `document.documentElement.scrollTop` 获取当前滚动条的位置。

let scrollPosition = window.scrollY || document.documentElement.scrollTop;

2. 在页面重新渲染后，将滚动条滚动到记录的位置，可以使用 `window.scrollTo` 方法滚动到指定位置。

window.scrollTo(0, scrollPosition);

3. 在滚动条滚动时，更新记录的滚动条位置。

window.addEventListener('scroll', function() {
  scrollPosition = window.scrollY || document.documentElement.scrollTop;
});

这样可以实现滚动条保留位置的效果。

相关问题

隐藏滚动条、保留div横向 鼠标滚动效果

隐藏滚动条并且保持`div`元素在水平方向上能够随着鼠标滚轮滚动的效果通常是在响应式设计或者需要优化视觉体验的情况下使用的。这可以通过CSS样式来实现：

1. **隐藏滚动条**：你可以使用`:hover`伪类以及`overflow`属性来让滚动条只有在需要的时候才显示出来。例如：

   .scrollable {
     overflow: auto;
     -ms-overflow-style: none; /* IE 和 Edge */
     scrollbar-width: none; /* Firefox */
   }
   
   .scrollable:hover {
     overflow-y: scroll;
     scrollbar-width: thin; /* 或者自定义宽度 */
   }

2. **保留横向滚动**：为了仅允许水平滚动，可以设置`overflow-x`为`auto`，`overflow-y`为`hidden`，这样只会显示水平滚动条：

   .scrollable-horzonly {
     overflow-x: auto;
     overflow-y: hidden;
   }

这样，当用户将鼠标悬停在`div`上方时，滚动条才会出现并允许他们在水平方向上滚动内容。