如何滚动绝对div？

Question

我需要滚动div绝对而不移动身体。我希望与https://www.pinterest.com具有相同的效果。有谁知道如何实现它？

像这样：

Answer 1

我怀疑你想要这样的JSFiddle Demo，这是代码：

HTML：

<div id="wrapper">
    <div id="content"></div>
</div>

的JavaScript：

for(var i=0; i<100; i++) {
    document.getElementById('content').innerHTML += '<p>hlllo</p>';
}

CSS：

#wrapper{
    position:fixed;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/7/70/Osteospermum_Flower_Power_Spider_Purple_2134px.jpg);
    width:500px;
    height:400px;
}

#content {  
    width:500px;
    height:400px;
    overflow-y:scroll;
}

#content p {
    margin-left:auto;
    margin-right:auto;
    width:100px;
    border: 1px solid white;
}

希望这有帮助。

Answer 2

有两种方法可以做到这一点。使用Javascript或CSS（确切地说是CSS3）。对于Javascript，您可以使用视差效果（Stellar.js或Skrollr或......）。或者你可以通过添加背景图像来简单地使用css属性，这个背景图像将有一个小的过渡，使它看起来像滚动。你可以检查一下Pinterest的CSS。