2024-10-08 10:00:07

禁用水平滚动

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

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

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

我尝试过:overflow-x:隐藏在css上我的html标签,但它只是使滚动条隐藏,并没有禁用滚动。

请帮帮我!

这是一个页面链接:http://www.green-panda.com/usd309bands/(坏链接)

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

这是加载第一页的时候:

这是在我向右滚动之后:


当前回答

javascript中有一种方法可以帮助您检测哪个html元素导致水平溢出->滚动条出现

这里有一个关于CSS技巧的文章链接

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

它可能返回如下内容:

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

然后你只需从div中删除额外的宽度或将其设置为max-width:100%

希望这能有所帮助!

它为我解决了这个问题。

其他回答

试着把它添加到你的CSS中

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

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

overflow-x: hidden;

对你外在的父母。在我的例子中,它看起来是这样的:

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

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

如果垂直滚动仍然被禁用,您可以显式地启用它:

overflow-y: scroll;

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

这是你代码的坏孩子:)

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

Koala_dev回答说这是可行的:

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

MarkWPiper评论道:“/导致触控/动量滚动在iPhone上停止工作”

在iPhone上保持touch / momentum的解决方案是在html的css块中添加这一行,body:

    height:auto!important;

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.     

.