只有垂直滚动条与垂直边缘的div

我想用一个垂直滚动条在HTML中创建一个列表。我知道如何做到这一点，但我卡住的部分是在溢出元素的边缘放置溢出元素内的div。只有垂直滚动条与垂直边缘的div

见下文代码：

#wrapper {margin: 50px; width: 500px; height: 500px;} 
#scrollable {width: 200px; height: 500px; overflow-y: visible; overflow-x: hidden;} 
.item {clear: left; width: 200px; height: 40px;} 

<body> 
    <div id='wrapper'> 
    <div id='scrollable'> 
     <div class='item'></div> 
     <div class='item'></div> 
    </div> 
    </div> 
</body>

我希望.item元件去5或10个像素以上#scrollable的左边缘。

任何人都可以告诉我如何做到这一点？

谢谢。

来源

2012-01-13 Michael Bates

这不能做到这样，这只是溢出是如何工作的，即移出侧容器的可见区域的一切变得隐。为什么要将其父容器左侧的5到10个像素偏移？我只是不确定什么修复矿石黑客可以做更多关于你为什么这样做的信息。 – einar 2012-01-13 03:04:37

我列出了列表中的一些项目，当选择其中一个项目时，它将在左边缘上移动五或十个像素以表示它是活动项目。 – 2012-01-13 04:06:43

因此，正如其他人所说的，您无法将元素显示在溢出不可见的元素的边界之外。

但是，假设您只是试图达到效果，您可以轻松完成。一种方法是，如果你的#scrollable元素必须是200px，那么每个宽度为012px，宽度为190px，偏移量为左边10px。否则，如果你是.items的宽度必须是200px，那么使用你的#scrollable元素来补偿。然后，在选择时，将偏移量保留为0.

我制作了一个JSFiddle。看看（在JS中是没有必要的，但只是模仿选择） http://jsfiddle.net/rgthree/tpfLZ/

来源

2012-01-13 17:07:36 rgthree

在#wrapper中，添加：overflow：visible;
在#scrollable中，添加：margin-left：-10px; （您可能需要设置宽度：210px以进行补偿）

测试以确保它符合您的要求。（请注意，这将使项目> 200px被切断到右侧）

来源

2012-01-13 00:56:22 Hope4You

这只是推动.item元素在#scrollable元素下留下10个像素。 – 2012-01-13 01:03:19

您是否添加了溢出：对#wrapper可见？当我复制并粘贴你给我的代码时，它可以正常工作（Safari 5）。 – Hope4You 2012-01-13 01:08:30

包装滚动？我想要的最好方法就是不要在包装上滚动。 – 2012-01-13 01:15:15

只有垂直滚动条与垂直边缘的div

回答

相关问题