禁用水平滚动

Question

好吧,出于某种原因,我的网页从左向右滚动显示了很多丑陋的空间.

我搜索了结果,但他们刚刚制作了滚动条隐藏

这就是我想要的,我想在物理上禁用水平滚动功能.我不希望用户能够在我的页面上上下左右滚动!

我试过:overflow-x:hidden在我的html标签上的css 但它只是隐藏了滚动条并且没有禁用滚动.

请帮我!

以下是该页面的链接:http://www.green-panda.com/usd309bands/(链接断开)

这可能会让你更好地了解我在说什么:

这是第一页加载的时间:

这是在我滚动到右边之后:

Answer 1

尝试将此添加到您的CSS

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

Answer 2

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

第一种方式

body { overflow-x:hidden; }

第二种方式您可以在 CSS body 标记中使用以下内容：

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); } } );

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

Answer 3

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

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

Answer 4

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

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

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

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

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

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

Answer 5

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

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

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

Answer 6

我知道为时已晚，但是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%

希望这可以帮助！

它为我解决了问题：]

Answer 7

尝试使用此选项仅对正文禁用宽度滚动所有文档都是正文 body{overflow-x: hidden;}

Answer 8

koala_dev回答这将起作用：

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

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

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

    height:auto!important;