html - 是否可以使滚动条位置：绝对？

Question

如果您已经创建了一个动态页面，您可能会注意到，如果您从不需要滚动条的页面高度开始，然后动态添加内容，则会出现滚动条。当它执行此操作时，它会将我的所有内容“推”到滚动条宽度的左侧，并且页面上的所有内容似乎都有一点跳跃。

是否可以使滚动条的行为就好像它是绝对位置一样，这样它就不会将我的内容全部向左推，而是覆盖在内容上。我不喜欢内容全部“跳”到左边的方式；它看起来很讨厌。

谢谢

Answer 1

您可以使用它overflow: overlay来避免您的内容被推送，它所做的不是占用您的容器空间，而是将滚动条定位到您的内容顶部

    .overlay {
      width: 100px;
      height: 100px;
      overflow: overlay;
    }
    
    .auto {
      width: 100px;
      height: 100px;
      overflow: auto;  
    }

<h2>scrollbar on content</h2>
<div class="overlay">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>


<h2>scrolbar sharing space with content</h2>
<div class="auto">
  <div >Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

具有覆盖 css 的 div 放置在溢出的 div 的顶部，但是具有自动溢出的 div 会推送数据。将其用于带有文本的容器并不是一个理想的解决方案，但我选择了文本，因此区别会很明显

Answer 2

你可以，但它不会是完美的。从这篇文章中复制代码：

// Used like $('#my-id').hasScrollbar();

jQuery.fn.hasScrollbar = function() {
var scrollHeight = this.get(0).scrollHeight;

//safari's scrollHeight includes padding
if ($.browser.safari)
    scrollHeight -= parseInt(this.css('padding-top')) + parseInt(this.css('padding-bottom'));

if (this.height() < scrollHeight)
    return true;
else
    return false;
}

您可以查询以查看滚动条是否存在。但是，在此之前，您将拥有一个全局变量，它是滚动条出现之前视口的宽度：

var viewportWidth = $(window).width();

运行上述函数后，您可以将其viewportWidth与带有滚动条的窗口的新视口宽度以及差margin-right的body负数进行比较。

Answer 3

你所要求的无法完成。

但是，您可以强制它始终出现：

#id {
    overflow: scroll;
}

但这太丑陋了。