我有一个div,只有300像素大,我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容,需要一直向下滚动。现在如果用户决定向上滚动,我不希望它跳回底部,直到用户再次向下滚动

是否有可能有一个div,将保持滚动到底部,除非用户向上滚动,当用户滚动回底部时,它需要保持自己在底部,即使添加了新的动态内容。我该怎么做呢。


当前回答

我设法把它修好了。诀窍是计算:(a)当前div用户滚动位置和(b) div滚动高度,都是在附加新元素之前。

如果a === b,则在追加新元素之前就知道用户位于底部。

    let div = document.querySelector('div.scrollableBox');

    let span = document.createElement('span');
    span.textContent = 'Hello';

    let divCurrentUserScrollPosition = div.scrollTop + div.offsetHeight;
    let divScrollHeight = div.scrollHeight;

    // We have the current scroll positions saved in
    // variables, so now we can append the new element.
    div.append(span);

    
    if ((divScrollHeight === divCurrentUserScrollPosition)) {
        // Scroll to bottom of div
        div.scrollTo({ left: 0, top: div.scrollHeight });
    }

其他回答

我试着用Bootstrap 5来做同样的事情。我正在编写的页面是一个单窗口html工具,我想要两列具有可滚动内容,其中一列需要反向,因为它是一个日志(另一列不太可能滚动,除非故意这么做)。列表和它们的标题也是底部锚定的,我很难让标题保持在一个灵活的可滚动列表的顶部。

多亏了上面的例子,我才能够找出我所缺少的内容并获得正确的类类型。

下面是完整的例子。在我实际的应用程序中,有其他两个类mh-100 col overflow-auto的第三列,不需要内部行/列,因为没有标题贴在顶部(如果视口太小,它只会正常滚动)。列表有一个ID,我使用它来选择并添加到它们前面或删除顶部元素(这是反向列表中的bottom <li>项)。

这里提供了一个较小的版本:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="vh-100 w-75 container-fluid"> <h1>2nd Level Scrolling Example</h1> <div class="h-75 row align-items-end"> <div class="mh-100 col d-flex flex-column"> <div class="row align-items-end"> <div class="col"><h3>Normal scroll list, grow on top</h3></div> </div> <div class="row align-items-end overflow-auto"> <div class="mh-100 col"> <ul class="list-group"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut</li> <li>tortor eu ex tincidunt pretium non eu nisl. Ut eu libero ac velit</li> <li>ultricies dapibus. Donec id augue scelerisque, gravida est ut,</li> <li>commodo sapien. Interdum et malesuada fames ac ante ipsum primis</li> <li>in faucibus. Suspendisse volutpat fermentum finibus. Cras egestas</li> <li>tempor tempor. Suspendisse potenti. Mauris ac tellus ultrices lectus</li> <li>accumsan pellentesque. Nullam semper, nisi nec euismod ultrices, leo</li> <li>sem bibendum sapien, in rutrum sapien massa id mi.</li> </ul> </div> </div> </div> <div class="mh-100 col d-flex flex-column"> <div class="row align-items-end"> <div class="col"><h3>Reverse scroll list, grow on bottom</h3></div> </div> <div class="row align-items-end d-flex flex-column-reverse overflow-auto"> <div class="mh-100 col"> <ul class="list-group"> <li>sem bibendum sapien, in rutrum sapien massa id mi.</li> <li>accumsan pellentesque. Nullam semper, nisi nec euismod ultrices, leo</li> <li>tempor tempor. Suspendisse potenti. Mauris ac tellus ultrices lectus</li> <li>in faucibus. Suspendisse volutpat fermentum finibus. Cras egestas</li> <li>commodo sapien. Interdum et malesuada fames ac ante ipsum primis</li> <li>ultricies dapibus. Donec id augue scelerisque, gravida est ut,</li> <li>tortor eu ex tincidunt pretium non eu nisl. Ut eu libero ac velit</li> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut</li> </ul> </div> </div> </div> </div> </div>

如果你的视口高度小于整体内容,标题应该位于列表的顶部,而所有内容都位于页面的底部(实际上是视口高度的75%,但在这个例子中,标题并没有占据它设计的空间)。

注:我不是一个真正的web开发人员,只是编写一些方便的基于html的工具来处理日常工作,所以非常欢迎评论。

这可能对你有帮助:

var element = document.getElementById("yourDivID");
element.scrollTop = element.scrollHeight;

[编辑],为了匹配注释…

function updateScroll(){
    var element = document.getElementById("yourDivID");
    element.scrollTop = element.scrollHeight;
}

每当添加内容时,调用函数updateScroll(),或设置一个计时器:

//once a second
setInterval(updateScroll,1000);

如果你只想在用户没有移动的情况下更新:

var scrolled = false;
function updateScroll(){
    if(!scrolled){
        var element = document.getElementById("yourDivID");
        element.scrollTop = element.scrollHeight;
    }
}

$("#yourDivID").on('scroll', function(){
    scrolled=true;
});
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

现场演示:http://jsfiddle.net/KGfG2/

你可以用这样的东西,

var element = document.getElementById("yourDivID");
window.scrollTo(0,element.offsetHeight);

在2020年,你可以使用css snap,但在Chrome 81之前,布局变化不会触发重新snap,纯css聊天ui在Chrome 81上工作,也可以检查我可以使用css snap。

这个演示将捕捉最后一个元素(如果可见),滚动到底部查看效果。

.container { overflow-y:滚动; overscroll-behavior-y:包含; 滚动抓拍型:y接近度; } .container > div > div:last child { scroll-snap-align:结束; } .container > div > div { 背景:浅灰色; 高度:3快速眼动; 字体大小:1.5快速眼动; } .container > div > div:n -child(2n) { 背景:灰色; } <div class="container" style="height:6rem"> < div > < div > < / div > 1 2 < div > < / div > < div > 3 < / div > 4 < div > < / div > 5 < div > < / div > < / div > < / div >

EDIT

使用scroll-snap类型:y接近度;,向上滚动更容易。