2024-10-08 10:00:07

禁用水平滚动

好吧,出于某种原因,我的网页从左向右滚动,显示了很多丑陋的空间。

我已经搜索了结果,但他们只是使滚动条隐藏

这就是我现在想要的,我想在物理上禁用水平滚动功能。我不希望用户能够在我的页面上从左到右只是上下滚动!

我尝试过: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;
});

我不建议这样做,因为它限制了小屏幕用户的功能。

其他回答

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

你可以应用上面的风格,也可以用javaScript创建函数来解决这个问题

我只能自己处理。毕竟我发现这个方法最简单和有用。 只需添加

overflow-x: hidden;

对你外在的父母。在我的例子中,它看起来是这样的:

<body style="overflow-x: hidden;">

你必须使用overflow-x,因为如果你只使用overflow,你也会禁用垂直滚动,即overflow-y

如果垂直滚动仍然被禁用,您可以显式地启用它:

overflow-y: scroll;

我知道这有点不合适,因为如果一切都设置好了,就不必使用这种快速而肮脏的方法。

Koala_dev回答说这是可行的:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

MarkWPiper评论道:“/导致触控/动量滚动在iPhone上停止工作”

在iPhone上保持touch / momentum的解决方案是在html的css块中添加这一行,body:

    height:auto!important;

所以为了正确地修复这个问题,我做了其他人在这里做的事情,并使用css来隐藏水平工具栏:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

然后在js中,我创建了一个事件监听器来寻找滚动,并抵消用户试图水平滚动。

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

我看到有人做了类似的事情,但显然没有成功。然而,这对我来说是完美的。

试试这个,只对身体禁用宽度滚动 所有的文件只是一个实体 身体{overflow-x:隐藏;}