如何使用固定容器滚动浏览 div 文本

Question

我有一个包含大量文本的容器，但我希望容器保持固定。容器不能容纳所有文本，我想要一个滚动来将从底部溢出的文本移动到固定的div 中，而div 顶部的文本从顶部溢出并被隐藏。

本质上，我希望容器是固定的，但窗口滚动条要考虑文本的总长度，而不仅仅是固定容器的高度。

#text-container {
   position: fixed;
   height: 300px;
   width: 400px;
   background: cyan;
}

http://jsfiddle.net/YEz5h/

我不一定需要任何直接的解决方案，但希望被指出正确的方向。我不想要任何溢出滚动条。我希望主窗口滚动条能够控制文本在视图中的移动。

Answer 1

它可以通过一点jQuery来完成。我将一个内部div附加到具有位置相对的#text-container。然后，我侦听窗口何时滚动并将bottom css位置更新为与scrollTop相同

$('#text-container').wrapInner('<div></div>');
$(window).on('scroll', function(){
    $('#text-container > div').css('bottom', $(window).scrollTop());
});

http://jsfiddle.net/YEz5h/3/

Answer 2

检查 JS 小提琴

http://jsfiddle.net/YEz5h/2/

#text-container {
    position: fixed;
    max-height: 300px;
    width: 400px;
    background: cyan;
    overflow-y:scroll;
}

Answer 3

您可以使用此代码

overflow-y:auto;
overflow-x:hidden;