实现内容滚动的最简单方法

Question

我有以下结构 - jsFiddle：
的 HTML              

第1部分

        

            
• Elem1
            
• elem2时
            
• Elem3
            ...         

        

第2部分

        

           
• Elem1
            
• elem2时
            
• Elem3
            ...         

        

第三部分

        

            
• Elem1
            
• elem2时
            
• Elem3
            ...         

                  

            
• 第1部分
            
• 第2部分
            
• 第三部分
        

     的 CSS

#container {
    float:left;
}
#controls {
    float:right;
}

当我点击控件时，页面会移动到所选部分。这是标准行为。我想要的是页面停留，只有container的内容移动。 实现这一目标的最简单方法是什么？它可以用纯CSS完成吗？或者可能已经有一个我可以使用的代码片段？ 我的想法： 我可以为container设置隐藏溢出，并在点击时为JS设置内容设置负边距。这是正确的方法吗？

Answer 1

是的，overflow就是这样做的。如果将其设置为auto，如果它溢出，它将为#container提供自己的滚动条。它需要一个指定的高度：

#container {
    float:left;
    height:600px;
    overflow:auto;
}

JSFiddle

如果你想让它100％达到页面的高度：

JSFiddle

Answer 2

我认为你想要的是位置：固定，就像这样：

#controls {
    float:right;
    position:fixed;
    right:0;
}

FIDDLE

Answer 3

您需要将#container设置为

position: absolute;

然后使用JS来控制元素的style.top