禁用水平滚动-Java 学习之路

129

好吧因为某些原因我的网页从左到右滚动显示了很多丑陋的空间 .

我搜索了结果，但他们只是滚动条 HIDDEN

这就是我想要的，我想实际上是水平滚动功能 . 我不希望用户能够在我的页面上上下左右滚动！

我已尝试： overflow-x:hidden 在我的 html 标签上的css，但它只是使滚动条隐藏，并没有禁用滚动 .

请帮我！

以下是该页面的链接：http：//www.green-panda.com/usd309bands/（已断开链接）

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

这是第一页加载的时间：

enter image description here

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

enter image description here

11 回答

4
如果要在整个屏幕宽度上禁用水平滚动，请使用此代码 .
```
element {
  max-width: 100vw;
  overflow-x: hidden;
}
```
这比“100％”效果更好，因为它忽略父宽度而是使用视口 .
回复于 2024-04-29T07:18:53+08:00
11
尝试将此添加到您的CSS
```
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
```
回复于 2024-04-29T07:18:53+08:00
370
所以为了正确解决这个问题，我做了其他人在这里做的事情并使用css来隐藏水平工具栏：
```
.name {
  max-width: 100%;
  overflow-x: hidden;
}
```
然后在js中，我创建了一个事件监听器来查找滚动，并抵消了用户尝试的水平滚动 .
```
var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);
```
我看到有人做了类似的事，但显然没有用 . 然而，这对我来说非常好 .
回复于 2024-04-29T07:18:53+08:00
1

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

回复于 2024-04-29T07:18:53+08:00

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.

回复于 2024-04-29T07:18:53+08:00

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

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

回复于 2024-04-29T07:18:53+08:00

1
koala_dev回答说这会有效：
```
html, body {
   max-width: 100%;
   overflow-x: hidden;
}
```
并且MarkWPiper评论说：“ - /导致触摸/动量滚动停止在iPhone上工作”

在iPhone上保持触摸/动量的解决方案是在hss，body的css块中添加此行：
```
height:auto!important;
```
回复于 2024-04-29T07:18:53+08:00
0
我只是自己处理它 . 毕竟我发现这种方法最简单实用 . 只需添加
```
overflow-x: hidden;
```
给你的外父 . 就我而言，它看起来像这样：
```
<body style="overflow-x: hidden;">
```
你必须使用 overflow-x ，因为如果你只使用 overflow 你也禁用垂直滚动，即 overflow-y

如果仍然禁用垂直滚动，则可以使用以下方法明确启用它：
```
overflow-y: scroll;
```
我知道它有点不合适，因为如果一切都安装得好，就不必使用这种快速而肮脏的方法 .
回复于 2024-04-29T07:18:53+08:00
0
我知道它也是 late ，但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%

希望这可以帮助！

它解决了我的问题：]
回复于 2024-04-29T07:18:53+08:00
0
```
.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }
```
您应用上面的样式或者您可以在javaScript中创建函数来解决该问题
回复于 2024-04-29T07:18:53+08:00

您可以使用JavaScript覆盖正文滚动事件，并将水平滚动重置为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;
});

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

回复于 2024-04-29T07:18:53+08:00

禁用水平滚动

11 回答

相关问题