禁用滚动 CSS

当我们需要让页面的某个区域固定不动而不影响其他区域的滚动时，可以使用禁用滚动 CSS。下面将介绍如何实现这一效果。

CSS 代码实现

.fixed {
  position: fixed;
  overflow-y: auto;
}

在上面的代码中，我们通过将该区域的 position 设置为 fixed 值来实现固定效果。同时，我们使用 overflow-y 属性将垂直方向的滚动条隐藏，并将其替换为区域自身的滚动条。

JavaScript 代码实现

const fixed = document.querySelector('.fixed');

fixed.addEventListener('wheel', (event) => {
  const deltaY = event.deltaY;
  const scrollTop = fixed.scrollTop;

  if ((deltaY < 0 && scrollTop === 0) || (deltaY > 0 && scrollTop >= fixed.scrollHeight - fixed.clientHeight)) {
    event.preventDefault();
  }
});

在 JavaScript 中，我们通过监听 .fixed 元素的滚轮事件来禁止滚动。首先，我们获取事件对象 event 中的 deltaY 属性，表示滚轮滚动的方向，以及 scrollTop 属性，表示当前元素在垂直方向上的滚动位置。

随后，我们根据滚轮滚动的方向和当前的滚动位置来判断是否需要禁止默认的滚动行为，从而屏蔽页面的滚动效果。

总结

通过上述的方式，我们可以实现禁用某个区域的滚动效果，从而让该区域可以固定不动而不影响其他部分的滚动。在具体应用中，我们需要根据实际情况选择 CSS 或 JavaScript 方案来实现这一效果。