要实现菜单滚动只在一个部分内显示页面,可以通过以下步骤来实现:
<div class="container">
<div class="menu">
<!-- 菜单内容 -->
</div>
<div class="content">
<!-- 页面内容 -->
</div>
</div>
.container {
height: 500px; /* 设置容器高度 */
overflow: auto; /* 设置容器内容溢出时显示滚动条 */
}
.menu {
width: 200px; /* 设置菜单宽度 */
float: left; /* 将菜单浮动到左侧 */
}
.content {
margin-left: 200px; /* 设置内容区域的左边距,使其不被菜单遮挡 */
}
var menu = document.querySelector('.menu');
menu.addEventListener('wheel', function(e) {
var container = document.querySelector('.container');
var scrollTop = container.scrollTop;
var scrollHeight = container.scrollHeight;
var clientHeight = container.clientHeight;
if ((e.deltaY < 0 && scrollTop <= 0) || (e.deltaY > 0 && scrollTop + clientHeight >= scrollHeight)) {
e.preventDefault(); // 阻止事件冒泡,防止页面整体滚动
}
});
通过以上步骤,就可以实现菜单滚动只在一个部分内显示页面。当菜单内容超过容器高度时,会显示滚动条,并且只有在菜单区域内滚动时才会触发滚动效果,避免了页面整体滚动。
推荐的腾讯云相关产品:腾讯云服务器(CVM)和腾讯云对象存储(COS)。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云