如何使页面不可滚动，但div可滚动
要使页面不可滚动，但div可滚动，可以通过CSS和JavaScript来实现。
- 使用CSS： 可以通过设置页面的overflow属性来控制页面的滚动行为。将body或html元素的overflow属性设置为hidden，可以禁止页面的滚动。然后，将需要滚动的div元素的overflow属性设置为auto或scroll，以允许该div元素内部的内容滚动。
示例代码：
body, html {
overflow: hidden;
}
div.scrollable {
overflow: auto;
height: 300px; /* 设置div的高度，超过该高度时会出现滚动条 */
}- 使用JavaScript： 可以通过JavaScript来动态设置页面的滚动行为。通过监听滚动事件，当滚动到指定的div元素时，禁止页面的滚动，而允许该div元素内部的内容滚动。
示例代码：
<body>
<div class="scrollable" onscroll="handleScroll(event)">
<!-- div内部的内容 -->
</div>
<!-- 其他页面内容 -->
</body>
<script>
function handleScroll(event) {
var div = event.target;
var scrollTop = div.scrollTop;
// 判断是否滚动到顶部或底部，如果是则禁止页面滚动
if (scrollTop === 0 || scrollTop === (div.scrollHeight - div.clientHeight)) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
}
</script>以上是使页面不可滚动，但div可滚动的实现方法。这种方法适用于需要在页面中创建可滚动区域的情况，例如弹出框、侧边栏等。对于需要在整个页面中禁止滚动的情况，可以将overflow属性设置为hidden，并且禁用滚动事件。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
