解决特定区域滚动导致页面整体滚动问题

前端

2023-09-02 19:45:42

引言

在网站设计中，我们经常遇到这样的情况：用户在某个特定区域滚动时，导致整个页面发生滚动。这种行为通常是不期望的，因为它会中断用户的浏览体验。在本文中，我们将探讨如何禁止特定区域（例如侧边栏菜单）的滚动导致页面整体滚动。

了解滚动事件

滚动事件是在用户滚动网页时触发的。当用户使用鼠标滚轮或触摸屏滑动时，就会触发滚动事件。浏览器会侦听此事件，并根据事件的deltaY属性调整页面位置。deltaY属性表示滚动距离，正值表示向下滚动，负值表示向上滚动。

解决方案

要禁止特定区域的滚动导致页面整体滚动，我们可以使用event.preventDefault()方法。此方法可阻止浏览器执行默认行为，即滚动页面。我们可以在特定区域（例如侧边栏菜单）的scroll事件侦听器中使用此方法。

以下代码段演示了如何在侧边栏菜单中实现此功能：

document.getElementById("sidebar").addEventListener("scroll", function(e) {
  e.preventDefault();
});

自定义滚动条

在某些情况下，我们可能还需要创建自定义滚动条来替换特定区域的默认滚动条。自定义滚动条允许我们完全控制滚动行为，包括禁止页面整体滚动。

要创建自定义滚动条，我们可以使用第三方库（例如perfect-scrollbar）或使用原生JavaScript实现。以下是使用原生JavaScript创建自定义滚动条的示例代码：

// 获取要替换的滚动条元素
const scrollElement = document.getElementById("sidebar");

// 创建一个新的滚动条元素
const customScrollbar = document.createElement("div");
customScrollbar.classList.add("custom-scrollbar");

// 将自定义滚动条添加到页面
scrollElement.parentNode.insertBefore(customScrollbar, scrollElement);

// 隐藏原始滚动条
scrollElement.style.overflow = "hidden";

// 添加滚动监听器
scrollElement.addEventListener("scroll", function() {
  // 根据 scrollElement 的滚动距离更新自定义滚动条的位置
  customScrollbar.scrollTop = scrollElement.scrollTop;
});

// 添加自定义滚动条的拖动处理程序
customScrollbar.addEventListener("mousedown", function(e) {
  // 存储鼠标按下时自定义滚动条的位置
  const scrollbarTop = customScrollbar.scrollTop;

  // 存储鼠标按下的位置
  const mouseY = e.clientY;

  // 创建鼠标移动监听器
  document.addEventListener("mousemove", function(e) {
    // 计算鼠标移动的距离
    const deltaY = e.clientY - mouseY;

    // 更新自定义滚动条的位置
    customScrollbar.scrollTop = scrollbarTop - deltaY;

    // 更新 scrollElement 的滚动位置
    scrollElement.scrollTop = customScrollbar.scrollTop;
  });

  // 创建鼠标松开监听器
  document.addEventListener("mouseup", function() {
    // 移除鼠标移动监听器
    document.removeEventListener("mousemove");
  });
});