禁用水平滚动[关闭]答案

【问题标题】：DISABLE the Horizontal Scroll [closed]禁用水平滚动[关闭]
【发布时间】：2013-07-19 22:46:41
【问题描述】：

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

我已经搜索了结果，但他们只是将滚动条设为 HIDDEN

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

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

请帮帮我！

~~这里是页面的链接：http://www.green-panda.com/usd309bands/~~（断开的链接）

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

这是第一页加载的时间：

这是在我向右滚动之后：

【问题讨论】：

没有水平滚动条怎么能水平滚动？
两根手指在笔记本电脑上从左到右移动。
出于好奇，您页面上的什么创建了默认滚动条？
如何在没有滚动条的情况下滚动？在 Windows 上单击鼠标中键拖动。
必须有一个块将具有额外的填充，即扩展 100% 宽度移除，这将是一个好习惯

标签： html css

【解决方案1】：

尝试将其添加到您的 CSS 中

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

【讨论】：

效果很好。我很高兴我找到了一个明白我在说什么的人！我会尽快接受。
在 Chrome 34 中，这并不能真正阻止滚动。它隐藏了滚动条，但通过中键滚动我仍然可以看到左侧隐藏的元素。
当您将浏览器窗口最小化到最薄的容量时，这不起作用
只有 html 有效，你包含 body，会出现另一个滚动条
:-/ 导致触摸/动量滚动停止在 iPhone 上工作

【解决方案2】：

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

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

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

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

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

我看到有人做了类似的事情，但显然没有奏效。然而，这对我来说非常好。

【讨论】：

这对我有用；但是在手机上刷卡时会有抖动；当运动减慢时。
"properly" 不完全是，但仍然是一个很好且有创意的答案。

【解决方案3】：

我知道这太晚了，但是 javascript 中有一种方法可以帮助您检测女巫 html 元素导致水平溢出 -> 出现滚动条

这是CSS Tricks上帖子的链接

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%

希望这会有所帮助！

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

【讨论】：

作为一个站点说明，boundingClientRect 比 offsetWidth 更精确：-developer.mozilla.org/en-US/docs/Web/API/Element/…-stackoverflow.com/questions/43537559/…
绝对的救命稻草！

【解决方案4】：

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

.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%;
}

【讨论】：

【解决方案5】：

koala_dev 回答说这会起作用：

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

MarkWPiper 认为“:-/ 导致触摸/动量滚动停止在 iPhone 上工作”

在 iPhone 上保持触摸/动量的解决方案是在 html,body 的 css 块内添加这一行：

    height:auto!important;

【讨论】：

放在哪里？在 body 标签或小屏幕的媒体查询下？
@Umair 谢谢 - 编辑评论以澄清 height: auto 行进入 html,body css 块。
非常感谢高度：自动解决方案！

【解决方案6】：

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

【讨论】：

【解决方案7】：

您可以在我们的 html 页面中尝试所有这些方法..

第一种方式

body { overflow-x:hidden; }

第二种方式您可以在 CSS 正文标签中使用以下内容：

overflow-y: scroll; overflow-x: hidden;

这将删除您的滚动条。

第三种方式

body { min-width: 1167px; }

第五种方式

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

第六种方式

element { max-width: 100vw; overflow-x: hidden; }

第四种方式..

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

现在我正在搜索更多..!!!!

【讨论】：

【解决方案8】：

如果您想在整个屏幕宽度上禁用水平滚动，请使用此代码。

element {
  max-width: 100vw;
  overflow-x: hidden;
}

这比“100%”效果更好，因为它忽略了父宽度，而是使用了视口。

【讨论】：

【解决方案9】：

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.

.

【讨论】：

谢谢，我喜欢教育。

【解决方案10】：

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

overflow-x: hidden;

给你的外父母。就我而言，它看起来像这样：

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

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

如果垂直滚动仍然被禁用，您可以通过以下方式显式启用它：

overflow-y: scroll;

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

【讨论】：

【解决方案11】：

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

你应用上面的样式或者你可以在 javaScript 中创建函数来解决这个问题

【讨论】：

【解决方案12】：

您可以使用 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;
});

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

【讨论】：

我要试试这个，CSS 修复对我的项目不起作用，呃，即使这样也不起作用:(
这对我不起作用