好吧，出于某种原因，我的网页从左向右滚动，显示了很多丑陋的空间。
我已经搜索了结果，但他们只是使滚动条隐藏
这就是我现在想要的，我想在物理上禁用水平滚动功能。我不希望用户能够在我的页面上从左到右只是上下滚动!
我尝试过: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;
其他回答
所以为了正确地修复这个问题，我做了其他人在这里做的事情，并使用css来隐藏水平工具栏:
.name {
max-width: 100%;
overflow-x: hidden;
}
然后在js中，我创建了一个事件监听器来寻找滚动，并抵消用户试图水平滚动。
var scrollEventHandler = function()
{
window.scroll(0, window.pageYOffset)
}
window.addEventListener("scroll", scrollEventHandler, false);
我看到有人做了类似的事情，但显然没有成功。然而，这对我来说是完美的。
如果您想禁用整个屏幕宽度的水平滚动，请使用此代码。
元素{ max-width: 100大众; overflow-x:隐藏; ｝
这比“100%”工作得更好，因为它忽略了父宽度，而是使用视口。
我只能自己处理。毕竟我发现这个方法最简单和有用。 只需添加
overflow-x: hidden;
对你外在的父母。在我的例子中，它看起来是这样的:
<body style="overflow-x: hidden;">
你必须使用overflow-x，因为如果你只使用overflow，你也会禁用垂直滚动，即overflow-y
如果垂直滚动仍然被禁用，您可以显式地启用它:
overflow-y: scroll;
我知道这有点不合适，因为如果一切都设置好了，就不必使用这种快速而肮脏的方法。
这是你代码的坏孩子:)
.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%;
}
javascript中有一种方法可以帮助您检测哪个html元素导致水平溢出->滚动条出现
这里有一个关于CSS技巧的文章链接
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
它可能返回如下内容:
<div class="class-of-the-div-with-extra-width">...</div>
然后你只需从div中删除额外的宽度或将其设置为max-width:100%
希望这能有所帮助!
它为我解决了这个问题。
