如何创建垂直滚动鼠标滚轮功能

Question

我已经创建了这个脚本：

jQuery(".resultlist").mousewheel(function(event, delta) {
this.scrollLeft -= (delta);
event.preventDefault();
});

它在CCD_ 1容器上触发水平滚动功能。我需要在545px以下的屏幕宽度上禁用它，所以我把它封装在一个调整大小的函数中。

/* Trigger Resize Script */
jQuery(document).ready(function(){
function resizeForm(){
var width = (window.innerWidth > 0) ? window.innerWidth : document.documentElement.clientWidth;
if(width > 545){
jQuery(".resultlist").mousewheel(function(event, delta) {
this.scrollLeft -= (delta);
event.preventDefault();
});
} else {
// invert
}    
}
window.onresize = resizeForm;
resizeForm();
});
/* End Trigger Resize Script */

我遇到的问题是，如果其他情况属实，脚本仍然可以运行。我确实开始开发一个函数，该函数会根据屏幕宽度包括并删除一个单独的脚本，但这变得非常麻烦，肯定不是实现这一点的正确方法。

我需要转换鼠标滚轮功能，使其表现得像正常的垂直滚动，这样我就可以在调整大小功能中在当前的水平滚动和正常的垂直滑动之间切换。

如何修改下面的功能以垂直滚动

jQuery(".resultlist").mousewheel(function(event, delta) {
this.scrollLeft -= (delta);
event.preventDefault();
});

Answer 1

您的代码中有很多内容。其中一个误解是，当调整窗口大小时，它会在元素上创建大量鼠标滚轮侦听器。以下是您如何实现所需目标：

'use strict';
// Allows an event handler to run only when the event has stopped to fire
function debounce(callback, delay = 200) {
let timeout;
return function() {
const context = this,
args = arguments;
window.clearTimeout(timeout);
timeout = window.setTimeout(function() {
callback.apply(context, args);
}, delay);
};
}
jQuery(document).ready(function() {
let width, dirProp;
function resizeForm() {
width = jQuery(window).width();
dirProp = (width > 545) ? 'scrollLeft' : 'scrollTop';
}
function scroll(event) {
event.preventDefault();
// Use the original event object to access WheelEvent properties
this[dirProp] += (event.originalEvent.deltaY);
}
jQuery(".resultlist").on('wheel', scroll);
jQuery(window).on('resize', debounce(resizeForm));
resizeForm();
});

.resultlist {
position: relative;
width: 200px;
height: 200px;
overflow: auto;
}
.list-content {
position: relative;
height: 500px;
width: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resultlist">
<div class="list-content">Text</div>
</div>

该代码使用标准WheelEvent和debuncert来防止连续处理调整大小事件(调整大小期间，调整大小事件每秒触发数十次(。调整大小处理程序更新width和dirProp变量，然后在WheelEvent处理程序中使用它们来确定滚动元素的方式(使用括号表示法，可以将变量用作属性名(。

值得注意的是，该代码必须使用严格模式，否则debouncr实际上可能会消耗比预期节省的时间更多的时间。

您可能需要添加某种"；滚动主页"；函数，用于在窗口大小更改时重置可滚动元素。您可以在jsFiddle上测试代码。