子 div 滚动完成后 再让 body 滚动
时间: 2023-12-14 09:40:14 浏览: 29
你可以使用 JavaScript 监听子 div 滚动事件,当子 div 滚动完成后再让 body 滚动。具体实现步骤如下:
1. 获取父元素和子元素。
2. 给子元素绑定滚动事件,使用 `scroll` 事件。
3. 在 `scroll` 事件中,判断子元素是否滚动到底部,可以通过以下方法计算:
```
const isScrolledToBottom = el.scrollHeight - el.scrollTop === el.clientHeight;
```
4. 如果子元素滚动到底部,则解除子元素的滚动事件,并让父元素开始滚动:
```
document.removeEventListener('scroll', onScroll);
document.body.style.overflow = 'auto';
```
完整代码示例:
```html
<div id="parent">
<div id="child">
<!-- 子元素内容 -->
</div>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
function onScroll() {
const isScrolledToBottom = child.scrollHeight - child.scrollTop === child.clientHeight;
if (isScrolledToBottom) {
// 子元素滚动到底部,解除子元素的滚动事件,并让父元素开始滚动
document.removeEventListener('scroll', onScroll);
document.body.style.overflow = 'auto';
}
}
child.addEventListener('scroll', onScroll);
</script>
```