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

我有一个包含大量文本的容器，但我希望该容器保持不变。容器没有保存所有文本，我需要一个滚动条，将从底部溢出的文本移动到固定div中，而div顶部的文本从顶部溢出并隐藏

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

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

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

检查JS小提琴

您可以使用此代码

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

---

这可以通过一点jQuery来完成。我将一个内部

div

附加到

#文本容器

，并带有相对位置。然后我监听窗口滚动的时间，并将

底部

css位置更新为与

滚动顶部

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

$（“#文本容器”）.wrapInner（“”）；
$（窗口）.on（'scroll'，function（）{
$（'#text container>div'）.css（'bottom'，$（window.scrollTop（））；
});

---

是的，我知道我能做到，但我不想让滚动条溢出。我希望主窗口滚动条能够覆盖文本在视图中的移动。您知道一种方法可以确定文本的高度，这样我就可以在

scrollHeight

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