这可能只是一个 mac 问题,但我有一个页面,其元素是页面大小的两倍,并且动态移动到视图中。在我的css中我设置了overflow-x:hidden,这样这个元素就不会创建一个丑陋的底部scollbar,问题出在我的笔记本电脑上(可能在ipad和其他设备上)我可以用两根手指滑动滚动和查看这个内容。这打破了整个布局,看起来非常糟糕,我正在寻找一种方法来完全禁用这个水平滚动动作与 javascript 或 css。
谢谢
这可能只是一个 mac 问题,但我有一个页面,其元素是页面大小的两倍,并且动态移动到视图中。在我的css中我设置了overflow-x:hidden,这样这个元素就不会创建一个丑陋的底部scollbar,问题出在我的笔记本电脑上(可能在ipad和其他设备上)我可以用两根手指滑动滚动和查看这个内容。这打破了整个布局,看起来非常糟糕,我正在寻找一种方法来完全禁用这个水平滚动动作与 javascript 或 css。
谢谢
JavaScript:
window.onscroll = function () {
window.scrollTo(0,0);
}
每当用户尝试滚动时,这会将滚动条返回到其原始 (0,0) 位置。让我知道这是否适用于我在台式机上的笔记本电脑垫。
首先,我使用了一个函数来检查滚动何时停止。然后我使用另一个功能回到中心。
(function(){
var special = jQuery.event.special,
uid1 = 'D' + (+new Date()),
uid2 = 'D' + (+new Date() + 1);
special.scrollstart = {
setup: function() {
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
if (timer) {
clearTimeout(timer);
} else {
evt.type = 'scrollstart';
jQuery.event.handle.apply(_self, _args);
}
timer = setTimeout( function(){
timer = null;
}, special.scrollstop.latency);
};
jQuery(this).bind('scroll', handler).data(uid1, handler);
},
teardown: function(){
jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
}
};
special.scrollstop = {
latency: 300,
setup: function() {
var timer,
handler = function(evt) {
var _self = this,
_args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout( function(){
timer = null;
evt.type = 'scrollstop';
jQuery.event.handle.apply(_self, _args);
}, special.scrollstop.latency);
};
jQuery(this).bind('scroll', handler).data(uid2, handler);
},
teardown: function() {
jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
}
};
})();
jQuery(window).bind('scrollstop', function(e){
// block horizontal scrolling
window.scrollTo(0,jQuery(window).scrollTop());
});