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;

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

3 个答案: