html - 禁用水平滚动

Question

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

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

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

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

请帮我！

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

这可能会让您更好地了解我在说什么：

这是第一页加载的时间：

在此处输入图像描述

这是在我向右滚动之后：

在此处输入图像描述

score 636 · Accepted Answer

636

尝试将此添加到您的 CSS

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

于 2013-07-19T22:53:45.147 回答

score 15 · Accepted Answer

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

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

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

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

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

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

score 14 · Accepted Answer

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

这是一篇关于CSS 技巧的帖子的链接

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%

希望这可以帮助！

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

score 13 · Accepted Answer

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

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

score 10 · Accepted Answer

koala_dev 回答说这会起作用：

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

MarkWPiper 评论说“：-/ 导致触摸/动量滚动停止在 iPhone 上工作”

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

    height:auto!important;

score 9 · Accepted Answer

9

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

于 2015-07-16T03:48:55.743 回答

score 9 · Accepted Answer

您可以在我们的 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); } } );

现在我正在寻找更多..!!!!

score 7 · Accepted Answer

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

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

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

score 2 · Accepted Answer

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.

.

score 2 · Accepted Answer

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

overflow-x: hidden;

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

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

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

如果垂直滚动仍然被禁用，您可以使用以下命令显式启用它：

overflow-y: scroll;

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

score 1 · Accepted Answer

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

您应用上述样式，或者您可以在javaScript中创建函数来解决该问题

score 0 · Accepted Answer

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

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

html - 禁用水平滚动

12 回答 12

Related

Reference