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

我有以下结构-：
HTML 第一部分

• Elem1
• Elem2
• Elem3
...

第二部分

• Elem1
• Elem2
• Elem3
...

第三部分

• Elem1
• Elem2
• Elem3
...

• 第一部分
• 第二部分
• 第三部分

CSS

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

当我单击控件时，页面将移动到所选零件。这是标准行为。我想要的是页面保持不变，只有

容器的内容移动。
最简单的方法是什么？可以用纯CSS实现吗？或者可能已经有一个代码片段我可以使用？
我的想法：
我可以为
容器
设置溢出隐藏，并在单击时为带有JS的内容设置负边距顶部。这是正确的方法吗？
我想你想要的是位置：固定，像这样：

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

是的，
溢出
正是这样做的。如果将其设置为
auto
，如果溢出，它将给出
#container
自己的滚动条。但它需要指定的高度：

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


如果您想使其100%成为页面的高度：

您需要将#容器设置为

position: absolute;

然后使用JS控制样式。元素顶部
在真实页面上可能不止这些…@Pay4m可能不止这些在真实页面上…查找？是的，但请注意页面也会滚动-如果视口小于600px，则仅隐藏链接。600px就是一个例子，很明显，OP会将其更改为其规格。@oGeez它不起作用。单击
part3
，您的
#控件将不可见。@Hiral请参阅更新。如果用户希望div有自己的滚动条，那么它不太可能比视图端口大。