首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用鼠标滚轮滚动到相应的部分,纯js

使用鼠标滚轮滚动到相应的部分可以通过纯 JavaScript 实现。以下是一个示例代码:

代码语言:txt
复制
// 监听鼠标滚轮事件
window.addEventListener('wheel', function(event) {
  event.preventDefault(); // 阻止默认滚动行为

  // 获取滚动方向
  var delta = event.deltaY || event.detail || event.wheelDelta;
  var direction = delta > 0 ? 'down' : 'up';

  // 获取需要滚动到的元素
  var targetElementId = '';

  // 根据滚动方向确定目标元素
  if (direction === 'down') {
    // 向下滚动时,找到下一个可见元素
    var currentElement = document.elementFromPoint(window.innerWidth / 2, window.innerHeight / 2);
    var nextElement = currentElement.nextElementSibling;
    while (nextElement && nextElement.offsetHeight === 0) {
      nextElement = nextElement.nextElementSibling;
    }
    if (nextElement) {
      targetElementId = nextElement.id;
    }
  } else {
    // 向上滚动时,找到上一个可见元素
    var currentElement = document.elementFromPoint(window.innerWidth / 2, window.innerHeight / 2);
    var previousElement = currentElement.previousElementSibling;
    while (previousElement && previousElement.offsetHeight === 0) {
      previousElement = previousElement.previousElementSibling;
    }
    if (previousElement) {
      targetElementId = previousElement.id;
    }
  }

  // 滚动到目标元素
  if (targetElementId) {
    var targetElement = document.getElementById(targetElementId);
    targetElement.scrollIntoView({ behavior: 'smooth' });
  }
});

这段代码会监听页面的鼠标滚轮事件,并根据滚动方向找到下一个或上一个可见元素,并使用 scrollIntoView 方法将目标元素滚动到可视区域内,实现滚动到相应的部分。

请注意,这只是一个基本的示例代码,具体的实现可能需要根据页面结构和需求进行调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券