禁用水平滚动

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

我已经search了结果，但他们只是做了滚动条HIDDEN

这就是我想要的，我想要禁用水平滚动function。 我不希望用户能够在页面上左右滚动！

我已经尝试过： overflow-x:hidden在我的html标签上的CSS，但它只隐藏了滚动条，并没有禁用滚动。

请帮帮我！

以下是该页面的链接： http : //www.green-panda.com/usd309bands/ （Broken link）

这可能会让你更清楚我在说什么：

这是加载第一页的时候：

这是我滚动到右侧后：

Answer 1

尝试添加到您的CSS

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

Answer 2

这是你的代码的讨厌的孩子:)

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

用它replace

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

Answer 3

所以为了解决这个问题，我做了其他的工作，用CSS来隐藏水平工具栏：

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

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

 var scrollEventHandler = function() { window.scroll(0, window.pageYOffset) } window.addEventListener("scroll", scrollEventHandler, false); 

我看到有人做了类似的事情，但显然没有奏效。 这对我来说工作得很好。

Answer 4

尝试这一个禁用宽度滚动只为身体的所有文件只是body{overflow-x: hidden;}

Answer 5

您可以使用JavaScript覆盖body滚动事件，并将水平滚动重置为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; }); 

我不build议这样做，因为它限制了小屏幕用户的function。

Answer 6

我知道这是为时已晚 ，但有一个在JavaScript的方法，可以帮助你检测女巫HTML元素导致水平溢出 – >滚动条出现

这里是一个链接到CSS技巧的post

 var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } ); 

它可能会返回这样的东西：

 <div class="div-with-extra-width">...</div> 

那么你只是从div删除额外的宽度或设置它的max-width:100%

希望这可以帮助！

它为我解决了这个问题：]