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放到页面的中心。但为此，我需要浮动和边距选项（它们不起作用）。此外，将来我将使用百分比，那么，我将来如何避免这些问题呢？

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

Answer 1

首先，我认为你有一个布局定位问题，这就是滚动条混乱的原因。如果不知道滚动条插件的内在函数或者甚至没有对滚动条插件进行逆向工程，我就会对你的布局问题投票。

问题在于，如果将.test div绝对位于具有绝对位置的另一个div中，而没有指定任何维度（高度和宽度），则不能期望.test div可以使用百分比，因为其父元素（.overview）的位置是绝对的，没有指定维度。所以，我真的认为值得记住绝对位置意味着什么。 Quote from W3Schools ...

绝对位置元素相对于具有静态位置的第一个父元素定位。如果找不到这样的元素，则包含的块是html元素

所以，目前，如果将.test设置为绝对位置，其宽度将为0（零），而.overview（其父级）的宽度为零，高度为零。懂了吗？零高度和零宽度...这意味着没有内容垂直溢出，因此，滚动条插件可以理解，不需要显示垂直滚动条...因为没有内容垂直溢出。

我希望它有意义

Answer 2

评论中提到的100％宽度不起作用。它只会禁用水平滚动条。这个技巧需要通过隔离类来获得另一种技巧。

.slideVerticalOnly .viewport .overview {
    width: 100%;
}

将“slideVerticalOnly”类添加到具有外观类的对象，例如“default-skin slideVerticalOnly”

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

2 个答案: