jquery - 自定义滚动条内容中的 Div 无法正常工作

Question

我将 div (.test) 插入自定义滚动条插件。默认情况下，宽度和高度为 100%。

HTML

 <div class="container default-skin">
     <div class="test">asdasd</div>
 </div>

CSS

.container { position:absolute; width:100%; height:100%; top:0; box-sizing: border-box; overflow: hidden; }
.test { float:left; width: 100%; height:1500px; background:red; }

问题由几个要素组成。

a) .test div 不适用于百分比，但适用于像素。

b) 如果我在 .test div 中使用 position:absolute，则包含所有内容的所有滚动条都会消失。

c) 此 div 中的百分比或定位存在类似问题。

我的问题:

我该如何解决这个问题？我想把 .test div 放在页面的中央。但是为此，我需要 float 和边距选项(它们不起作用)。另外，以后我会使用百分比，那么，以后我怎样才能避免这个问题呢？

我在 jsfiddle 中创建了一个演示。 Check it

Answer 1

首先，我认为您存在布局定位问题，这就是滚动条困惑的原因。在不了解滚动条插件的内在特性或什至不对滚动条插件进行逆向工程的情况下，我会为您遇到的布局问题投票。

问题是，如果您将 .test div 绝对放置在另一个 div 中，并且绝对位置没有指定任何尺寸(高度和宽度)，您就不能期望 .test div 使用百分比，因为它的父元素 (.overview) 也是绝对定位的，没有指定尺寸。所以，我真的认为有必要记住绝对位置的含义。 Quote from W3Schools ...

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is the html element

因此，目前，如果您将 .test 设置为绝对位置，则其宽度将为 0(零)，而 .overview(其父项)的宽度和高度为零.明白了吗？零高度和零宽度...这意味着没有内容垂直溢出，因此，滚动条插件知道不需要显示垂直滚动条...因为没有内容垂直溢出。

我希望这是有道理的