要使页面不可滚动,但div可滚动,可以通过CSS和JavaScript来实现。
示例代码:
body, html {
overflow: hidden;
}
div.scrollable {
overflow: auto;
height: 300px; /* 设置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元无门槛券
手把手带您无忧上云