我有一个div,只有300像素大,我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容,需要一直向下滚动。现在如果用户决定向上滚动,我不希望它跳回底部,直到用户再次向下滚动
是否有可能有一个div,将保持滚动到底部,除非用户向上滚动,当用户滚动回底部时,它需要保持自己在底部,即使添加了新的动态内容。我该怎么做呢。
我有一个div,只有300像素大,我希望它在页面加载时滚动到内容的底部。这个div有动态添加的内容,需要一直向下滚动。现在如果用户决定向上滚动,我不希望它跳回底部,直到用户再次向下滚动
是否有可能有一个div,将保持滚动到底部,除非用户向上滚动,当用户滚动回底部时,它需要保持自己在底部,即使添加了新的动态内容。我该怎么做呢。
当前回答
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);
现场演示:http://jsfiddle.net/KGfG2/
其他回答
我能够得到这个工作与CSS只。
诀窍在于:
display: flex;
flex-direction: column-reverse;
浏览器将底部视为顶部。假设您的目标浏览器支持灵活框,唯一需要注意的是标记必须以相反的顺序排列。
下面是一个工作示例。https://codepen.io/jimbol/pen/YVJzBg
在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接近度;,向上滚动更容易。
Jim Hall的答案更可取,因为当你向上滚动时,它确实不会滚动到底部,它也是纯CSS。
然而,非常不幸的是,这不是一个稳定的解决方案:在chrome(可能是由于1像素的问题由dotnetCarpenter上面描述),scrollTop行为不准确的1像素,即使没有用户交互(在元素添加)。你可以设置scrollTop = scrollHeight - clientHeight,但是当另一个元素被添加时,这将保持div的位置,也就是“保持自己在底部”功能不再工作了。
所以,简而言之,添加少量Javascript(唉)将修复这个问题并满足所有要求:
类似于https://codepen.io/anon/pen/pdrLEZ this(示例由Coo),在添加一个元素到列表后,还可以执行以下操作:
container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
container.scrollTop = container.scrollHeight - container.clientHeight;
}
29是直线的高度。
因此,当用户向上滚动半行时(如果可能的话?),Javascript将忽略它并滚动到底部。但我想这是可以忽略的。而且,它修复了Chrome 1px的东西。
我发现最友好的解决方案是将滚动-快照-对齐方法与少量Javascript结合起来。前一种解决方案本身的问题是,抓拍太强了,你必须滚动很远才能摆脱它。
相反,我们可以在容器滚动到底部时使用捕捉动态,然后在用户向上滚动超过某个阈值时禁用它。
这个解决方案还有一个额外的好处,那就是它是一个渐进的增强:如果用户禁用了Javascript,它就会退回到只使用css的方法。
const container = document.getElementById("container"); const snap = document.getElementById("snap"); // Scroll the view to the bottom once initially container.scrollTop = container.scrollHeight; container.addEventListener("scroll", (event) => { const target = event.currentTarget; const scroll = target.scrollTop; const maxScroll = target.scrollHeight - target.clientHeight; const threshold = 50; // px isScrollBottomedOut = maxScroll - scroll < threshold; // If the user scrolls up more than the threshold, disable snapping // If the user scrolls down again, reenable snapping snap.style.display = isScrollBottomedOut ? "block" : "none"; }); #container { width: 200px; height: 500px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; -ms-scroll-chaining: none; overscroll-behavior: contain; -ms-scroll-snap-type: y proximity; scroll-snap-type: y proximity; border: 2px solid black; } #snap { scroll-snap-align: end; } <div id="container"> <ol> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> <!-- This is the snapping target, if visible --> <div id="snap"></div> </div>
这个问题有原生的支持。
有一个叫做*. scrollintoview的方法。 在运行此方法一次之后,它将容器滚动保持在底部。 即使在容器中添加了新内容,它也会滚动到底部。
import {
AfterViewInit,
Directive,
ElementRef,
} from '@angular/core';
@Directive({
selector: '[aeScrollIntoView]',
})
export class ScrollIntoViewDirective implements AfterViewInit {
constructor(private readonly el: ElementRef<HTMLDivElement>) {}
ngAfterViewInit(): void {
this.el.nativeElement.scrollIntoView({ behavior: 'smooth' });
}
}
<div aeScrollIntoView>
Your long and dynamic content.
Whenever new content is added to this container, it scrolls to the bottom.
<div>