Question

我有一个中心对齐的DIV网站。现在，有些页面需要滚动，有些则不需要。当我从一种类型移动到另一种类型时，滚动条的外观会将页面移动几个像素到一侧。如果没有在每个页面上明确显示滚动条，有没有办法避免这种情况？

Answer 1

溢出-y：滚动是正确的，但你应该将它与html标签一起使用，而不是正文，否则你在IE 7中得到一个双滚动条
所以正确的CSS将是：

html {
  overflow-y: scroll;
}

Answer 2

我有同样的问题，但我有一个好主意：将可滚动元素的内容包装到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。在左侧创建该宽度的填充将模拟第二个滚动条，将居中的内容向右移回。

请注意，这仅在可滚动元素使用页面的整个宽度时才有效，但这在大多数情况下应该没有问题，因为只有少数其他情况下您有可居中的可滚动内容。

Answer 3

我想不是。但使用body样式overflow: scroll应该可以。但你似乎知道这一点。

Answer 4

总是显示滚动，可能不适合布局。

尝试使用css3

限制身体宽度

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

vw是视口的宽度（有关解释，请参阅this link）
calc在css3中计算 34px代表双滚动条宽度（如果您不信任固定尺寸，请参阅this修正或this to calculate）

Answer 5

html {
  overflow-x: hidden;
  margin-right: calc(-1 * (100vw - 100%));
}

Example。点击＆＃34;更改最小高度＆＃34;按钮。

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

Answer 6

我不知道这是否是一个旧帖子，但我有同样的问题，如果你想垂直滚动，你应该尝试overflow-y:scroll

Answer 7

如果更改大小或在加载某些数据后添加滚动条，则可以尝试关注，创建类并应用此类。

.auto-scroll {
   overflow-y: overlay;
   overflow-x: overlay;
}

Answer 8

像这样简单地设置容器元素的宽度就可以解决问题

width: 100vw;

这将使该元素忽略滚动条，并且可以处理背景颜色或图像。

Answer 9

我已经在我的一个网站上解决了这个问题，方法是在javascript中通过视口大小减去滚动条的宽度来显式设置主体的宽度。我使用基于jQuery的函数记录here来确定滚动条的宽度。

<body id="bodyid>

var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";

Answer 10

延长Rapti's answer，这也应该可以正常工作，但它会在body的右侧增加更多的保证金，并将其隐藏为负html页边距，而不是添加额外的填充可能会影响页面的布局。这样，实际页面上没有任何变化（在大多数情况下），代码仍然有效。

html {
    margin-right: calc(100% - 100vw);
}
body {
    margin-right: calc(100vw - 100%);
}

Answer 11

如果表格的宽度不变，则可以设置包含滚动条的元素（例如tbody）的宽度> 100％（为滚动条留出额外的空间），并将overflow-y设置为“ overlay” ”（这样滚动条将保持固定，并且在出现时不会向左移动表格）。还要使用滚动条为元素设置固定的高度，以便一旦超出高度，滚动条就会出现。像这样：

tbody {
  height: 100px;
  overflow-y: overlay;
  width: 105%
}

注意：您将必须手动调整宽度％，因为滚动条占用的空间百分比将相对于表格宽度（即：表格宽度较小，需要更大的百分比来容纳滚动条，因为它的尺寸为像素不变）

动态表格示例：

function addRow(tableID)
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
  
    for(var i=0; i<colCount; i++)
    {
        var newRow = row.insertCell(i);

        newRow.innerHTML = table.rows[0].cells[i].innerHTML;
        newRow.childNodes[0].value = "";
    }
}
 
function deleteRow(row)
{
    var table = document.getElementById("data");
    var rowCount = table.rows.length;
    var rowIndex = row.parentNode.parentNode.rowIndex;

    document.getElementById("data").deleteRow(rowIndex);
}

.scroll-table {
  border-collapse: collapse;
}

.scroll-table tbody {
  display:block;
  overflow-y:overlay;
  height:60px;
  width: 105%
}

.scroll-table tbody td {
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
}

.scroll-table thead tr {
  display:block;
}

.scroll-table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

.scroll-table td:first-child {
    border-left: thin solid;
}

.scroll-table td:last-child {
    border-right: thin solid;
}

.scroll-table tr:first-child {
    display: none;
}

.delete_button {
    background-color: red;
    color: white;
}

.container {
  display: inline-block;
}

body {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="test_table.css">
</head>

<body>
<h1>Dynamic Table</h1>
<div class="container">

  <table id="data" class="scroll-table">
    <tbody>
      <tr>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
      </tr>
    </tbody>
  </table>

  <input type="button" value="Add" onclick="addRow('data')" />

</div>

<script src="test_table.js"></script>
</body>
</html>

Answer 12

使用calc（100vw - 100％）发布的解决方案在正确的轨道上，但是存在一个问题：即使您调整窗口大小，您也将永远在滚动条的左侧留有余量这样内容就会填满整个视口。

如果你试图通过媒体查询解决这个问题，你会有一个尴尬的捕捉时刻，因为当你调整窗口大小时，边距不会逐渐变小。

这是一个解决方案，AFAIK没有任何缺点：

而不是使用保证金：自动将内容居中，请使用：

body {
margin-left: calc(50vw - 500px);
}

将500px替换为内容最大宽度的一半（因此在此示例中，内容最大宽度为1000px）。内容现在将保持居中和边距将逐渐减小，直到内容填充视口。

为了在视口小于最大宽度时阻止边距变为负数，只需添加媒体查询，如下所示：

@media screen and (max-width:1000px) {
    body {
        margin-left: 0;
    }
}

Etvoilà！

Answer 13

使用此扩展答案：

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

一位评论员建议添加左边填充以保持居中：

body {
    padding-left: 17px;
    width: calc(100vw - 17px);
}

但是，如果您的内容比视口宽，那么事情看起来不正确。要解决此问题，您可以使用媒体查询，如下所示：

@media screen and (min-width: 1058px) {
    body {
        padding-left: 17px;
        width: calc(100vw - 17px);
    }
}

1058px =内容宽度+ 17 * 2

这使得水平滚动条可以处理x溢出，并在视口宽度足以包含固定宽度内容时保持居中内容居中

Answer 14

我尝试修复可能由twitter bootstrap .modal-open类应用于body引起的同一问题。解决方案html {overflow-y: scroll}无济于事。我找到的一种可能解决方案是将{width: 100%; width: 100vw}添加到html元素。

Answer 15

我的方法是让轨道透明。滚动条拇指颜色为 #C1C1C1 以匹配默认滚动条拇指颜色。你可以做任何你喜欢的:)

试试这个：

html {
    overflow-y: scroll;
}

body::-webkit-scrollbar {
    width: 0.7em;
    background-color: transparent;
}

body::-webkit-scrollbar-thumb {
    background: #C1C1C1;
    height:30px;
}

body::-webkit-scrollbar-track-piece
{
    display:none;
}

Answer 16

@kashesandr's solution对我有用，但是为了隐藏水平滚动条，我为主体添加了另一种样式。这是完整的解决方案：

CSS

<style>
/* prevent layout shifting and hide horizontal scroll */
html {
  width: 100vw;
}
body {
  overflow-x: hidden;
}
</style>

JS

$(function(){
    /**
     * For multiple modals.
     * Enables scrolling of 1st modal when 2nd modal is closed.
     */
    $('.modal').on('hidden.bs.modal', function (event) {
      if ($('.modal:visible').length) {
        $('body').addClass('modal-open');
      }
    });
});

仅JS解决方案（从第一个模态打开第二个模态时）：

/**
 * For multiple modals.
 * Enables scrolling of 1st modal when 2nd modal is closed.
 */
$('.modal').on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
    $('body').css('padding-right', 17);
  }
});

Answer 17

我尝试了溢出滚动，但对我的情况不起作用。滚动条仍然添加了某种（白色）填充。有效的是将宽度从 100vw 更改为 100%，但对于高度，可以使用 100vh。所以这个：

const Wrapper = styled.div`
   min-height: 100vh
`

const Parent = styled.div`
   width: 100%
`

const Children = styled.div`
   width: 100%
`

编辑我已经设置了两次宽度，因为父组件有一个侧边栏，还有子组件。根据您的用例，您可以设置一次。

Answer 18

在尝试了以上大部分在我的案例中都不起作用的基于 CSS 或基于 JS 的解决方案后，只想加起来。我的解决方案适用于滚动条必须在事件中消失的情况（例如，单击按钮，因为您刚刚打开了一个应阻止页面滚动的全屏菜单）。

当以下样式应用于将 array([[ True, True, False, True], [ True, False, True, True]]) 变为 overflow-y 的元素（在我的例子中是 hidden 标记）时，这应该有效：

body

说明：您的 body { overflow-x: hidden; width: 100vw; margin-right: calc(100vw - 100%); } 标签的 width 是 body（因此它包括滚动条的宽度）。

通过设置 100vw，只有当您的垂直滚动条可见时才会应用边距（因此您的页面内容实际上不在滚动条下方），这意味着页面内容不会重新定位一次 margin-right改变了。

注意：此解决方案仅适用于不可水平滚动的页面。

在 Chrome 89.0、Firefox 87.0、Safari 14.0.3 上测试

更新：不幸的是，它只适用于不占 100% 宽度的居中容器 - 否则滚动条会覆盖右侧的内容。

Answer 19

我用来解决这个问题，但修复它的简单方法就是这个（这对我有用）：

CSS文件类型

：

body{overflow-y:scroll;}

就这么简单！：）

Answer 20

@media screen and (min-width: 1024px){
    body {
    min-height: 700px
    }
}

Answer 21

我用了一些jquery来解决这个问题

$('html').css({
    'overflow-y': 'hidden'
});

$(document).ready(function(){
  $(window).load(function() {
    $('html').css({
      'overflow-y': ''
    });
  });
});

Answer 22

与接受的答案相反，即使内容没有溢出屏幕，永久滚动条在浏览器窗口上显示，我更愿意使用：

html{
  height:101%;
}

这是因为如果内容实际上溢出，滚动条的外观更有意义。

This比this更有意义。

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

22 个答案: