左边的div块高度超过屏幕高度,在右边滚动到底部时,左边的底部被隐藏无法查看,实现那种,当右边div块剩余的滚动高度等于左边的高度时左右两个div块同时滚动。
时间: 2024-03-26 21:41:43 浏览: 161
vue.js-div滚动条隐藏但有滚动效果的实现方法
可以通过监听右边 div 块的滚动事件,来实现左右两个 div 块同时滚动的效果。当右边 div 块的滚动高度剩余值等于左边 div 块的高度时,设置左边 div 块的 scrollTop 值与右边 div 块的 scrollTop 值相等。
具体的实现流程如下:
1.获取左右两个 div 块的元素节点。
2.在右边 div 块上注册滚动事件监听器,并在监听器中实现以下逻辑:
```javascript
rightDiv.onscroll = function() {
// 获取左右两个 div 块的高度
const leftHeight = leftDiv.offsetHeight;
const rightHeight = rightDiv.offsetHeight;
// 获取右边 div 块的滚动高度和可视区域高度
const rightScrollTop = rightDiv.scrollTop;
const rightVisibleHeight = rightDiv.offsetHeight;
// 计算右边 div 块的滚动高度剩余值
const rightScrollRemain = rightHeight - rightVisibleHeight - rightScrollTop;
// 如果右边 div 块的滚动高度剩余值等于左边 div 块的高度
if (rightScrollRemain === leftHeight) {
// 设置左边 div 块的 scrollTop 值与右边 div 块的 scrollTop 值相等
leftDiv.scrollTop = rightScrollTop;
rightDiv.scrollTop = rightScrollTop;
}
}
```
这样,当右边 div 块滚动到底部时,左边 div 块也会跟随滚动,直到左边 div 块的底部也被滚动到可视区域内。
阅读全文