Html 禁用水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17756649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DISABLE the Horizontal Scroll
提问by user2371301
Ok for some reason my webpage scrolls from left to right and shows a lot of ugly space.
好吧，出于某种原因，我的网页从左到右滚动并显示了很多丑陋的空间。
I have searched for results but they just made the scrollbar HIDDEN
我已经搜索过结果，但他们只是隐藏了滚动条
That's now what I want, I want to physically DISABLEthe horizontal scroll feature. I do not want the user to be able to scroll left to right on my page just up and down!
这就是我现在想要的，我想物理禁用水平滚动功能。我不希望用户能够在我的页面上从左到右滚动！
I have tried: overflow-x:hiddenin css on my htmltag but it only made the scrollbar hidden and did not disable the scroll.
我试过：overflow-x:hidden在我的html标签上的 css 中，但它只隐藏了滚动条，并没有禁用滚动。
Please help me!
请帮我！
Here is a link to the page: http://www.green-panda.com/usd309bands/(Broken link)
这是该页面的链接：http: //www.green-panda.com/usd309bands/（断开的链接）
This might give you a better idea of what I am talking about:
这可能会让你更好地了解我在说什么：
This is when the first pages loads:
这是第一页加载时：
And this is after I scroll to the right:
这是在我向右滚动之后：
回答by koala_dev
Try adding this to your CSS
尝试将此添加到您的 CSS
html, body {
max-width: 100%;
overflow-x: hidden;
}
回答by Abdul Malik
this is the nasty child of your code :)
这是你代码的讨厌的孩子:)
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}
replace it with
将其替换为
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}
回答by Dylan Cope
So to fix this properly, I did what others here did and used css to get hide the horizontal toolbar:
所以为了正确解决这个问题，我做了这里其他人所做的并使用 css 来隐藏水平工具栏：
.name {
max-width: 100%;
overflow-x: hidden;
}
Then in js, I created an event listener to look for scrolling, and counteracted the users attempted horizontal scroll.
然后在 js 中，我创建了一个事件侦听器来查找滚动，并抵消了用户尝试水平滚动的行为。
var scrollEventHandler = function()
{
window.scroll(0, window.pageYOffset)
}
window.addEventListener("scroll", scrollEventHandler, false);
I saw somebody do something similar, but apparently that didn't work. This however is working perfectly fine for me.
我看到有人做了类似的事情，但显然这不起作用。然而，这对我来说非常好。
回答by MoolsBytheway
I know it's too late, but there is an approach in javascript that can help you detect witch html element is causing the horizontal overflow -> scrollbar to appear
我知道为时已晚，但是 javascript 中有一种方法可以帮助您检测女巫 html 元素是否导致水平溢出 - > 滚动条出现
Here is a link to the post on CSS Tricks
这是CSS Tricks上的帖子的链接
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
it Might return something like this:
它可能会返回如下内容：
<div class="div-with-extra-width">...</div>
then you just remove the extra width from the divor set it's max-width:100%
然后您只需从 中删除额外的宽度div或将其设置为max-width:100%
Hope this helps!
希望这可以帮助！
It fixed the problem for me :]
它为我解决了问题:]
回答by easa
Try this one to disable width-scrolling just for body
the all document just is body
body{overflow-x: hidden;}
试试这个来禁用宽度滚动只为正文所有文档只是正文
body{overflow-x: hidden;}
回答by ffffff
koala_dev answered that this will work:
koala_dev 回答说这会起作用：
html, body {
max-width: 100%;
overflow-x: hidden;
}
And MarkWPiper comments that ":-/ Caused touch / momentum scrolling to stop working on iPhone"
MarkWPiper 评论说“:-/ 导致触摸/动量滚动停止在 iPhone 上工作”
The solution to keep touch / momentum on iPhone is to add this line inside the css block for html,body:
在 iPhone 上保持触摸/动量的解决方案是在 html,body 的 css 块中添加以下行：
height:auto!important;
回答by SchadeM
Koala_dev's answer will work, but in case you are wondering this is the reason why it works:
Koala_dev 的答案会起作用，但如果您想知道这就是它起作用的原因：
.
q.html, body { <--applying this css block to everything in the
html code.
q.max-width: 100%; <--all items created must not exceed 100% of the
users screen size. (no items can be off the page
requiring scroll)
q.overflow-x: hidden; <--anything that occurs off the X axis of the
page is hidden, so that you wont see it going
off the page.
.
.
回答by Fabian von Ellerts
If you want to disable horizontal scrolling over the entire screen width, use this code.
如果要在整个屏幕宽度上禁用水平滚动，请使用此代码。
element {
max-width: 100vw;
overflow-x: hidden;
}This works better than "100%" because it ignores the parent width and instead uses the viewport.
这比“100%”效果更好，因为它忽略父宽度而是使用视口。
回答by Fabian von Ellerts
You can try this all of method in our html page..
您可以在我们的 html 页面中尝试所有这些方法。
1st way
第一种方式
body { overflow-x:hidden; }
2nd way You can use the following in your CSS body tag:
第二种方式您可以在 CSS body 标签中使用以下内容：
overflow-y: scroll; overflow-x: hidden;
That will remove your scrollbar.
这将删除您的滚动条。
3rd way
第三种方式
body { min-width: 1167px; }
5th way
第五种方式
html, body { max-width: 100%; overflow-x: hidden; }
6th way
第 6 种方式
element { max-width: 100vw; overflow-x: hidden; }
4th way..
第四种方式..
var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );
Now i m searching about more..!!!!
现在我正在寻找更多......！！！
回答by rushikeshmore
.name
{
max-width: 100%;
overflow-x: hidden;
}
You apply the above style or you can create function in javaScriptto solve that problem
您可以应用上述样式，或者您可以在javaScript 中创建函数来解决该问题
