左边的div块高度超过屏幕高度,在右边滚动到底部时,左边的底部被隐藏无法查看,实现那种,当右边div块剩余的滚动高度等于左边的高度时左右两个div块同时滚动。完整代码
时间: 2024-03-26 14:41:55 浏览: 35
好的,以下是一个完整的实现代码:
```html
<style>
.container {
display: flex;
height: 100vh;
}
.left {
flex: 1;
overflow-y: scroll;
}
.right {
flex: 2;
overflow-y: scroll;
}
</style>
<div class="container">
<div class="left">
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
<p>左边的 div 块内容</p>
</div>
<div class="right">
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
<p>右边的 div 块内容</p>
</div>
</div>
<script>
const leftDiv = document.querySelector('.left');
const rightDiv = document.querySelector('.right');
rightDiv.addEventListener('scroll', function() {
const leftHeight = leftDiv.offsetHeight;
const rightHeight = rightDiv.offsetHeight;
const rightScrollTop = rightDiv.scrollTop;
const rightVisibleHeight = rightDiv.offsetHeight;
const rightScrollRemain = rightHeight - rightVisibleHeight - rightScrollTop;
if (rightScrollRemain === leftHeight) {
leftDiv.scrollTop = rightScrollTop;
rightDiv.scrollTop = rightScrollTop;
}
});
</script>
```
在这个代码中,我们首先定义了一个 `container` 容器,并在其中包含了一个 `left` 和一个 `right` 两个 div 块。`left` 用来放置高度超过屏幕高度的内容,`right` 用来放置可以滚动的内容。
然后,我们通过 `querySelector` 方法获取了 `left` 和 `right` 两个 div 块的元素节点,并在 `right` 上注册了滚动事件监听器。在监听器中,我们实现了之前提到的逻辑,当 `right` 的滚动高度剩余值等于 `left` 的高度时,同时设置两个 div 块的 scrollTop 值相等,实现左右两个 div 块同时滚动的效果。
最后,我们将这段逻辑放在一个 `<script>` 标签中,插入到 HTML 页面中即可。
阅读全文