logo标签列表

如何防止滚动条重新定位网页？

htmlcss
317

我有一个居中对齐的DIV网站。现在，有些页面需要滚动，有些不需要。当我从一个类型切换到另一个类型时，滚动条出现会让页面向侧边移动几个像素。有没有办法避免这种情况，而不需要在每个页面上明确显示滚动条？

11
为什么在这个帖子中没有人提到 overflow-y: overlay？ - milkersarac
5
根据 Mozilla 文档，overflow-y: overlay 已经被废弃：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow - drojf
5
已弃用，虽然“depreciated”这个词也有一定意义。 - cdosborn
26个回答
324

overflow-y:scroll是正确的，但你应该将其与html标签一起使用，而不是body标签，否则在IE 7中会出现双重滚动条
所以正确的CSS应该是：

html {
  overflow-y: scroll;
}
1
当与fancybox或Twitter Bootstrap模态框结合使用时，这可能会导致问题，例如双滚动条。 - Ruben
109
值得一提的是，这将永久显示垂直滚动条。这可能并不总是可接受的。 - rustyx
2
我在Chromium和Firefox中都出现了双重滚动条。我正在使用flex-box，也许这是导致问题的原因... - Garrett
2
@Garrett 请尝试使用 body 标签。 - Ruben
1
非常感谢！在尝试解决问题之前，我很高兴读了这篇文章！ - Tyler Brown
显示剩余4条评论
169
将可滚动元素的内容包装在一个 div 中，并应用 padding-left: calc(100vw - 100%);。
<body>
    <div style="padding-left: calc(100vw - 100%);">
        Some Content that is higher than the user's screen
    </div>
</body>

诀窍在于 100vw 表示包括滚动条在内的视口的100％。 如果您减去可用空间而不带滚动条的 100％ ，则会得到滚动条的宽度或者如果不存在，则为 0 。 在左侧创建该宽度的填充将模拟第二个滚动条，将居中内容向右移回。
请注意，仅当可滚动元素使用页面的整个宽度时，才能实现此目标，但大多数情况下这应该不成问题，因为只有很少的其他情况需要居中滚动内容。
5
最好使用 class 而不是行内样式，这种方式只在 这些浏览器 中有效，但这是一种聪明的技巧——我之前没有意识到 100vw 和 100% 测量的是不同的东西，所以我从中学到了有用的知识！ - Nick F
44
这绝对是一个天才的想法，并且考虑到 calc 的浏览器支持非常好，这确实是最好的答案。 - michael
2
你可以做同样的事情，只是不要在左边添加边距，而是在右边添加负边距（参见 https://dev59.com/TnM_5IYBdhLWcg3wWRoF#39289453）。 - Touniouk
5
这个解决方案会引起类似于答案 "width: calc(100vw - 34px);" 的背景色问题，但是会发生在左侧。 - Maciej Lew
5
我会尽量简洁明了地翻译以下内容，同时保持忠实于原义，不做任何解释或添加额外的信息。以下是需要翻译的内容：我建议在这个样式中加入一些媒体查询 - @media screen and (min-width: 800px) {...}。这样可以让内容适应页面宽度。例如在小分辨率下会出现不必要的间隙，导致内容向右移动。 - MarkosyanArtur
显示剩余11条评论
55
html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

示例。点击“更改最小高度”按钮。

使用calc(100vw - 100%)，我们可以计算出滚动条的宽度（如果不显示则为0）。思路：使用负的右边距，我们可以增加<html>的宽度到这个宽度。你将看到一个水平滚动条-应该使用overflow-x: hidden隐藏。

1
我必须将内容放在一个 div 中，并将边距应用于该 div 才能使其工作（类似于 Rapti 的答案）。但这看起来更整洁。 - Touniouk
4
这个方法很好用，而且在Chrome和Firefox中似乎不会出现不想要的横向滚动条。为什么不直接使用calc(100% - 100vw)代替乘以-1呢？ - SystemParadox
1
这会将内容放置在滚动条下面，将其隐藏起来。 - DRC
适合我的需求的唯一解决方案 - testing_22
43

我认为不需要。但是使用 overflow: scroll 属性来样式化 body 元素应该可以解决问题。虽然你好像已经知道这一点了。

4
听起来不错... 强制页面始终显示滚动条，无论是否需要，... 那么页面类型之间就没有视觉变化。 - eidylon
1
是的，但如果我没记错的话，这会显示两个滚动条。我实际上不需要水平的那一个。 - Dmitri Nesteruk
这是真的。但是我无法提供太多帮助:( 实际上，我只认为我的回答的第一句话才是针对问题的真正答案。 - Michael Krelin - hacker
2
以下是更好的答案。 - Sami
@MichaelKrelin-hacker，您的回答帮我解决了一个问题。谢谢您。 - madhu kumar
@sami 你的意思是“以下是…”吗？哪个答案更好？ - Ray Toal
42

滚动条一直显示可能对布局不利。

尝试使用CSS3限制页面宽度。

body {
    width: calc(100vw - 34px);
}

vw 代表视口的宽度（请查看此链接了解详细信息）
calc 是CSS3中的一个计算方法
34px 表示双滚动条宽度（如果您不相信固定大小，请参阅此处进行计算，或者查看此处的固定值）

5
直到有人需要，一切都是徒劳无功。 - Moesio
3
这比强制使用滚动条的方法（如所接受的答案所描述的）在视觉上要不那么突兀。 - Silas Hansen
4
到目前为止，这是最适合我的需求的方法。我还添加了padding-left: 34px;以使我的页面居中对齐。 - Pat Migliaccio
4
这应该是被接受的答案，与当前被接受的答案不同，它实际上回答了问题！ - Coz
3
如果你的导航栏/头部颜色与页面背景或底部边框颜色不同，就会出现问题。 - Zia Ul Rehman Mughal
显示剩余5条评论
21

如果更改大小或加载一些数据后出现滚动条，则可以尝试以下操作，创建一个类并应用此类。

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}
2
根据MDN，在Firefox中不支持overflow: overlay。“仅受WebKit（例如Safari）和Blink（例如Chrome或Opera）浏览器支持。” - Erik Joling
17
13

我不知道这是否是一篇旧帖子，但我遇到了同样的问题，如果你只想垂直滚动，你应该尝试使用overflow-y:scroll

13

摘要

我看到三种方法 - 每种方法都有其特点：

这里是一个StackBlitz演示

点击“切换高度”以查看内容移动。

scrollbar-gutter

这个功能支持有限，但是通过使用@support媒体查询，我们可以结合使用overflow-y: scroll：

html {
  overflow-y: scroll;
}

@supports (scrollbar-gutter: stable) {
  html {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

以这种方式，内容将永远不会移动。
这种解决方案的“问题”是，滚动条总是有一个固定的空间。
overflow: overlay 有有限的支持，并且它显然会隐藏任何它覆盖的东西。需要特别注意确保没有重要内容被隐藏（在缩放和文本大小更改时也是如此）。
可以与 scrollbar-gutter 结合使用：
html {
  overflow-y: scroll;
}

@supports (scrollbar-gutter: stable) {
  html {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

@supports (overflow-y: overlay) {
  html {
    overflow-y: overlay;
    scrollbar-gutter: auto;
  }
}

可以使用负边距和overflow-x: hidden来实现，但在某些情况下可能会隐藏重要内容，例如小屏幕、自定义字体/缩放大小、浏览器扩展等。

calc(100vw - 100%)

这可以通过RTL支持来实现：

html[dir='ltr'] main {
  padding-left: calc(100vw - 100%);
}

html[dir='rtl'] main {
  padding-right: calc(100vw - 100%);
}

在这种情况下，<main>将成为居中内容的容器。
只要居中容器小于<main>，这里的内容就不会移动。但是一旦它占据了容器的100％，就会引入填充。请参见StackBlitz演示并单击“切换宽度”。
这种解决方案的“问题”是您需要媒体查询来防止在“小屏幕”上出现填充，并且即使在小屏幕上 - 当滚动条应该可见时 - 仍会发生一些移位，因为没有空间用于100％的内容和滚动条。
结论 使用scrollbar-gutter，也许结合overlay。如果您绝对不想要空白间隙，请尝试使用带有媒体查询的calc解决方案。
9

只需像这样设置容器元素的宽度即可解决问题。

width: 100vw;

这将使该元素忽略滚动条，并且它可用于背景颜色或图像。
1
将此设置在“body”元素上可以起作用，但会添加一个水平滚动条（在Firefox中使用）。还有其他原因说明这个解决方案不是一个好主意吗？ - TomDogg
在html上非常有效。 - Arbnor Lumezi
1
我不得不在具有width: 100vw的HTML上使用以下样式：box-sizing: border-box; // 这样宽度将包括padding，padding-right: 1.2rem; // 避免滚动条宽度和overflow-x: hidden; // 隐藏水平滚动条。 - Ketan Chaudhari
这对我来说最好，没有任何副作用。在FF上完全正常。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接