Question

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

是否可以将滚动条的行为视为绝对位置，以便不是将我的内容全部推到左侧，而是将内容放在内容上。我不喜欢内容全部“跳”到左边的方式;它看起来很讨厌。

由于

Answer 1

你可以，但它不会是完美的。从this帖子中复制代码：

// 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 2

你要求的是无法做到的。

然而，你可以强迫它一直出现：

#id {
    overflow: scroll;
}

但这非常难看。

Answer 3

您可以使用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会推送数据。将其用于带有文本的容器不是一个理想的解决方案，但我选择了文本，以使区别显而易见

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

3 个答案: