禁用水平滚动[关闭]

180

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

我已经搜索了结果，但它们只是使滚动条处于隐藏状态

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

我试过了：overflow-x:hidden在html标签上的css中，但是它只使滚动条处于隐藏状态，而没有禁用滚动。

请帮我！

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

这可能使您对我所说的内容有了更好的了解：

这是第一页加载时：

在此处输入图片说明

这是在我向右滚动之后：

在此处输入图片说明

html css

— 用户名
source

1

如果没有水平滚动条，如何水平滚动？

— 冷冻豌豆罗迪（Roddy of the Frozen Peas）2013年

9

从左到右在笔记本电脑上的鼠标上的两个手指。

— user2371301 2013年

1

出于好奇，您的页面上什么创建了默认滚动条？

— Trojan

4

如何在没有滚动条的情况下滚动？在Windows上单击鼠标中键并拖动。

— Nayuki

必须有一个具有额外填充的块，例如，扩展100％的宽度删除将是一个好习惯

— 疹

492

尝试将其添加到您的CSS

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

— koala_dev
source

5

效果很好。我很高兴找到一个能理解我在说什么的人！我会尽快接受。

— user2371301 2013年

44

在Chrome 34中，这并不能真正阻止滚动。它隐藏了滚动条，但是通过中键滚动，我仍然可以看到左侧的隐藏元素。

— gphilip 2014年

2

当您将浏览器窗口最小化到最薄的容量时，这将不起作用

— dspacejs，2015年

4

：-/导致触摸/动量滚动停止在iPhone上运行

— MarkWPiper

2

我爱你，伙计！

— rochasdv '16

13

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

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

— 阿卜杜勒·马利克（Abdul Malik）
source

13

因此，要正确解决此问题，我做了这里其他人所做的，并使用css隐藏了水平工具栏：

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

然后在js中，我创建了一个事件侦听器以查找滚动，并抵消了用户尝试水平滚动的情况。

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

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

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

— 迪伦·科普
source

这对我有用；但是，刷卡时手机上会有抖动；同时运动变慢。

— 2015年

“适当”虽然不完全，但仍然是一个很好的创造性答案。

— Feathercrown

9

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

希望这可以帮助！

它为我解决了问题：]

— MoolsBytheway
source

作为网站的音符，boundingClientRect更精确比offsetWidth： - developer.mozilla.org/en-US/docs/Web/API/Element/... - stackoverflow.com/questions/43537559/...

— 愚者

绝对的救星！

— 尾巴

8

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

— easa
source

5

koala_dev回答这将起作用：

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

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

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

    height:auto!important;

— ff
source

放在哪里？在正文标签下还是对小屏幕进行媒体查询？

— Umair

1

@Umair谢谢-编辑注释以阐明高度：自动行位于html，body css块中。

— ffffff

高度感谢您：自动解决方案！

— Torben

2

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.

。

— 沙德
source

谢谢，我喜欢教育。

— 皮条客Trizkit

2

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

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

展开摘要

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

— 费边·冯·埃勒兹（Fabian von Ellerts）
source

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

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

— Srikrushna
source

1

我只需要自己处理。毕竟，我发现此方法最简单实用。只需添加

overflow-x: hidden;

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

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

之所以必须使用，overflow-x是因为如果仅使用overflow它也会禁用垂直滚动，即overflow-y

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

overflow-y: scroll;

我知道这有些不妥当，因为如果一切都设置正确，就不必使用这种快速又肮脏的方法。

— 笨蛋
source

1

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

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

— 拉什凯什莫尔
source

0

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

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

— 奥斯汀·布伦霍斯特（Austin Brunkhorst）
source

2

我要尝试一下，CSS修复不适用于我的项目，呃，即使这样也不起作用:(

— Leon Gaban 2014年

这对我不起作用

— Souhail Ben Slimene