问题描述
我想创建一个页面和一个部分的网站。 该部分上有一个分页，当鼠标向上/向下滚动时，该分页将更改页面。
我曾尝试实现mousewheel事件，但是该事件不仅触发了多次，而且一次滚动向下/向上事件会多次更改我的页码。 我已经检查了滚动和鼠标滚轮事件，但每个事件不仅会一次触发该事件，还会在一个滚动事件上多次触发该事件
var page = 1; $(window).bind('mousewheel', function(event) { if (event.originalEvent.wheelDelta >= 0) { $('#page-number').html(page++); console.log('Scroll up'); } else { $('#page-number').html(page--); console.log('Scroll down'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>Page <span id="page-number">1</span></div>
我希望当鼠标上下滚动不多次时，页面只会改变一次。
1楼
您可以使用 或功能。
例：
let page = 1; const mouseWheelHandler = (event) => { if (event.originalEvent.wheelDelta >= 0) { $('#page-number').html(page++); console.log('Scroll up'); } else { $('#page-number').html(page--); console.log('Scroll down'); } } // will be called in a half of second after user stops to scroll $(window).bind('mousewheel', _.debounce((event) => mouseWheelHandler(event), 500)); // will be called once in a second while user keeps scrolling // $(window).bind('mousewheel', _.throttle((event) => mouseWheelHandler(event)), 1000));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script> <div>Page <span id="page-number">1</span></div>
2楼
var page = 1; var currentDirection; $(window).bind('mousewheel', function(event) { if (currentDirection !== 'up' && event.originalEvent.wheelDelta >= 0) { currentDirection = 'up'; $('#page-number').html(page++); console.log('Scroll up'); } else if (currentDirection !== 'down') { currentDirection = 'down'; $('#page-number').html(page--); console.log('Scroll down'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div>Page <span id="page-number">1</span></div>