如何确保鼠标滚轮/滚轮事件在可滚动div中的每个滚动中只触发一次

要确保鼠标滚轮/滚轮事件在可滚动div中的每个滚动中只触发一次，可以通过以下步骤实现：

监听滚轮事件：使用JavaScript代码添加滚轮事件的监听器。可以使用addEventListener方法来监听滚轮事件，并指定要触发的处理函数。
防止事件冒泡：在滚轮事件的处理函数中，使用event对象的stopPropagation方法来阻止事件冒泡。这样可以确保滚轮事件只在当前元素中触发，而不会向父元素传播。
判断滚动方向：在滚轮事件的处理函数中，使用event对象的deltaY属性来判断滚动的方向。deltaY大于0表示向下滚动，小于0表示向上滚动。
判断滚动位置：在滚轮事件的处理函数中，使用当前可滚动div的scrollTop属性和scrollHeight属性来判断滚动位置。scrollTop表示滚动条顶部距离可滚动div顶部的距离，scrollHeight表示可滚动div的内容高度。通过比较这两个值，可以判断滚动条是否已经滚动到底部或顶部。
触发滚动事件：根据滚动方向和滚动位置的判断结果，决定是否触发滚动事件。可以使用自定义的标志变量来记录上一次触发滚动事件的位置和方向，与当前位置和方向进行比较，只有在满足条件时才触发滚动事件。

以下是一个示例代码，演示如何确保鼠标滚轮/滚轮事件在可滚动div中的每个滚动中只触发一次：

// 获取可滚动div元素
var scrollableDiv = document.getElementById('scrollableDiv');

// 定义标志变量
var lastScrollTop = 0;
var lastScrollDirection = '';

// 监听滚轮事件
scrollableDiv.addEventListener('wheel', function(event) {
  // 防止事件冒泡
  event.stopPropagation();

  // 判断滚动方向
  var scrollDirection = event.deltaY > 0 ? 'down' : 'up';

  // 判断滚动位置
  var isAtTop = scrollableDiv.scrollTop === 0;
  var isAtBottom = scrollableDiv.scrollTop + scrollableDiv.clientHeight === scrollableDiv.scrollHeight;

  // 触发滚动事件
  if ((scrollDirection !== lastScrollDirection || scrollableDiv.scrollTop !== lastScrollTop) && !(isAtTop && scrollDirection === 'up') && !(isAtBottom && scrollDirection === 'down')) {
    // 执行滚动事件的操作
    console.log('滚动事件触发');

    // 更新标志变量
    lastScrollTop = scrollableDiv.scrollTop;
    lastScrollDirection = scrollDirection;
  }
});

这是一个基本的实现方法，可以根据具体需求进行调整和优化。在实际开发中，可以根据项目需要选择合适的框架或库来处理滚动事件，例如使用jQuery的scroll方法或使用React的Scroll组件等。

腾讯云相关产品和产品介绍链接地址：