body 不滚动 让 子 div 滚动具体示例代码
时间: 2023-08-18 16:03:56 浏览: 50
好的,以下是一个基本的 HTML 和 CSS 代码示例,可以让子 div 滚动而不让 body 滚动:
```html
<!DOCTYPE html>
<html>
<head>
<title>子 div 滚动示例</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}
.content {
height: 2000px; /* 设置一个大于容器高度的高度 */
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- 这里放置你希望滚动的内容 -->
</div>
</div>
</body>
</html>
```
这里使用了 CSS 的 `position: absolute` 属性将容器撑满整个页面,并使用 `overflow-y: scroll` 属性将容器设置为可滚动。同时将 body 的 `overflow` 属性设置为 `hidden`,这样就可以隐藏 body 的滚动条。 `content` div 的高度设置为一个比容器高度更高的值,以确保可以滚动。
相关问题
滚动鼠标时候 让 子div 滚动 body 不滚动
你可以通过设置子div的样式属性`overflow`为`auto`,并添加`max-height`或`height`属性来限制子div的高度。然后,使用JavaScript监听子div的滚动事件,并在事件处理程序中阻止事件冒泡到父元素(即body),从而防止body的滚动。
以下是示例代码:
HTML代码:
```
<body>
<div id="parent">
<div id="child">
<!-- 子div的内容 -->
</div>
</div>
</body>
```
CSS代码:
```
#parent {
/* 父元素的样式属性 */
}
#child {
overflow: auto;
max-height: 300px; /* 设置子div的最大高度 */
/* 或者使用 height: 300px; 限制子div的高度 */
}
```
JavaScript代码:
```
var childDiv = document.getElementById("child");
childDiv.addEventListener("scroll", function(event) {
event.stopPropagation(); // 阻止事件冒泡到父元素
});
```
子 div 滚动完成后 再让 body 滚动
你可以使用 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>
```