滚动条操作的优雅降级!

站长
· 阅读数 4
契机
最近发现一个很有意思的交互,滚动条操作的优雅降级 拿表格举例,当数据不足以产生上下滚动条时,并且此时有左右滚动条,此时滑动鼠标滚轮 操作的是左右的滚动条,当拥有上下滚动条时,鼠标滚轮操作还原。感觉极大的提高的操作体验,故此浅浅实现一下。
实现思路
1.初始化条件信息 2.初始化鼠标在有滚动条元素上的监控 3.有上下滑动则不生效左右滑动,没上下生效左右
判断出现滚动条的DOM
元素是X
or Y
的滚动条
function initScrollInfo(element){
element["isScrollX"] = element.scrollWidth > element.clientWidth;
element["isScrollY"] = element.scrollHeight > element.clientHeight;
}
其中对于滚动条监控的事件 现在应该使用 wheel_event 而非兼容性较差的 mousewheel。
以下脚本创建了一个全局的 addWheelListener
方法,它可以兼容各浏览器监听滚动事件,并且阻止默认行为。
// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {
var prefix = "", _addEventListener, onwheel, support;
// detect event model
if ( window.addEventListener ) {
_addEventListener = "addEventListener";
} else {
_addEventListener = "attachEvent";
prefix = "on";
}
// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // 各个厂商的高版本浏览器都支持"wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit 和 IE 一定支持"mousewheel"
"DOMMouseScroll"; // 低版本 firefox
window.addWheelListener = function( elem, callback, useCapture ) {
_addWheelListener( elem, support, callback, useCapture );
// handle MozMousePixelScroll in older Firefox
if( support == "DOMMouseScroll" ) {
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
}
};
function _addWheelListener( elem, eventName, callback, useCapture ) {
elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
!originalEvent && ( originalEvent = window.event );
// create a normalized event object
var event = {
// keep a ref to the original event object
originalEvent: originalEvent,
target: originalEvent.target || originalEvent.srcElement,
type: "wheel",
deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
deltaX: 0,
deltaZ: 0,
preventDefault: function() {
originalEvent.preventDefault ?
originalEvent.preventDefault() :
originalEvent.returnValue = false;
}
};
// calculate deltaY (and deltaX) according to the event
if ( support == "mousewheel" ) {
event.deltaY = - 1/40 * originalEvent.wheelDelta;
// Webkit also support wheelDeltaX
originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
} else {
event.deltaY = originalEvent.detail;
}
// it's time to fire the callback
return callback( event );
}, useCapture || false );
}
})(window,document);
监控滚轮元素的事件滑动
需要禁入原有默认行为
function watchScroll(element){
element.addEventListener("wheel",(e)=>{
if(element.isScrollX == false || element.isScrollY){
return;
}
e.preventDefault();
element.scroll(element.scrollLeft + e.deltaY,0,'smooth');
})
}
初始化 即可实现传入元素即监听。
function init(element){
initScrollInfo(element);
watchScroll(element);
}
此次只有对效果的实现,读者可根据自己需要加入边界判断。