好吧,出于某种原因,我的网页从左向右滚动,显示了很多丑陋的空间。
我已经搜索了结果,但他们只是使滚动条隐藏
这就是我现在想要的,我想在物理上禁用水平滚动功能。我不希望用户能够在我的页面上从左到右只是上下滚动!
我尝试过:overflow-x:隐藏在css上我的html标签,但它只是使滚动条隐藏,并没有禁用滚动。
请帮帮我!
这是一个页面链接:http://www.green-panda.com/usd309bands/(坏链接)
这可能会让你更好地理解我在说什么:
这是加载第一页的时候:
这是在我向右滚动之后:
您可以使用JavaScript重写主体滚动事件,并将水平滚动重置为0。
function bindEvent(e, eventName, callback) {
if(e.addEventListener) // new browsers
e.addEventListener(eventName, callback, false);
else if(e.attachEvent) // IE
e.attachEvent('on'+ eventName, callback);
};
bindEvent(document.body, 'scroll', function(e) {
document.body.scrollLeft = 0;
});
我不建议这样做,因为它限制了小屏幕用户的功能。
所以为了正确地修复这个问题,我做了其他人在这里做的事情,并使用css来隐藏水平工具栏:
.name {
max-width: 100%;
overflow-x: hidden;
}
然后在js中,我创建了一个事件监听器来寻找滚动,并抵消用户试图水平滚动。
var scrollEventHandler = function()
{
window.scroll(0, window.pageYOffset)
}
window.addEventListener("scroll", scrollEventHandler, false);
我看到有人做了类似的事情,但显然没有成功。然而,这对我来说是完美的。