禁用水平滚动

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

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

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

我尝试过:overflow-x:隐藏在css上我的html标签，但它只是使滚动条隐藏，并没有禁用滚动。

请帮帮我!

这是一个页面链接:http://www.green-panda.com/usd309bands/(坏链接)

这可能会让你更好地理解我在说什么:

这是加载第一页的时候:

这是在我向右滚动之后:

当前回答

Koala_dev回答说这是可行的:

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

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

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

    height:auto!important;

其他回答

Koala_dev回答说这是可行的:

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

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

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

    height:auto!important;

试着把它添加到你的CSS中

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

这是你代码的坏孩子:)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

将其替换为

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

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

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

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

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

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

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

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

推荐文章