除非用户向上滚动,否则保持溢出div滚动到底部

Question

我有一个只有300像素大的div,当页面加载滚动到内容的底部时我想要它.此div具有动态添加到其中的内容,需要始终保持滚动状态.现在,如果用户决定向上滚动,我不希望它跳回到底部,直到用户再次向下滚动

除非用户向上滚动,当用户向后滚动到底部时,即使添加了新的动态内容,它也需要保持在底部,否则可以使div保持滚动到底部.我该如何创造这个呢？

Answer 1

我刚刚实现了这个,也许你可以使用我的方法.

假设我们有以下HTML:

<div id="out" style="overflow:auto"></div>

然后我们可以检查它是否滚动到底部:

var out = document.getElementById("out");
// allow 1px inaccuracy by adding 1
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;

scrollHeight为您提供元素的高度,包括由于溢出而导致的任何不可见区域.clientHeight为您提供CSS高度或以另一种方式表示元素的实际高度.两种方法都返回高度margin,因此您无需担心.scrollTop为您提供垂直滚动的位置.0是top,max是元素的scrollHeight减去元素高度本身.使用滚动条时,将滚动条一直向下移动可能很困难(我在Chrome中).所以我投入1px不准确.所以,isScrolledToBottom即使滚动条1px的从底部将是真实的.您可以将此设置为适合您的任何内容.

然后,只需将元素的scrollTop设置为底部即可.

if(isScrolledToBottom)
    out.scrollTop = out.scrollHeight - out.clientHeight;

我为你展示了这个概念:http://jsfiddle.net/dotnetCarpenter/KpM5j/

编辑:添加代码片段,以澄清时isScrolledToBottom是true.

将滚动条粘到底部

const out = document.getElementById("out")
let c = 0

setInterval(function() {
    // allow 1px inaccuracy by adding 1
    const isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1

    const newElement = document.createElement("div")

    newElement.textContent = format(c++, 'Bottom position:', out.scrollHeight - out.clientHeight,  'Scroll position:', out.scrollTop)

    out.appendChild(newElement)

    // scroll to bottom if isScrolledToBottom is true
    if (isScrolledToBottom) {
      out.scrollTop = out.scrollHeight - out.clientHeight
    }
}, 500)

function format () {
  return Array.prototype.slice.call(arguments).join(' ')
}

#out {
    height: 100px;
}

<div id="out" style="overflow:auto"></div>
<p>To be clear: We want the scrollbar to stick to the bottom if we have scrolled all the way down. If we scroll up, then we don't want the content to move.
</p>

Answer 2

我只能使用CSS.

诀窍是使用display: flex;和flex-direction: column-reverse;

浏览器将底部视为顶部.假设您的目标支持浏览器flex-box,唯一需要注意的是标记必须按相反的顺序排列.

这是一个有效的例子.https://codepen.io/jimbol/pen/YVJzBg

Answer 3

虽然这可能会帮助你:

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;
});

Answer 4

在 2020 年，您可以使用css snap，但在 Chrome 81 之前，布局更改不会触发 re-snap，纯 css chat ui可在 Chrome 81 上运行，您也可以查看Can I use CSS snap。

如果可见，此演示将捕捉最后一个元素，滚动到底部以查看效果。

.container {
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y proximity;
}

.container > div > div:last-child {
  scroll-snap-align: end;
}

.container > div > div {
  background: lightgray;
  height: 3rem;
  font-size: 1.5rem;
}
.container > div > div:nth-child(2n) {
  background: gray;
}

<div class="container" style="height:6rem">
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>

编辑

使用scroll-snap-type: y proximity;，向上滚动更容易。

Answer 5

$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

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

Answer 6

$('#div1').scrollTop($('#div1')[0].scrollHeight);

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);

Answer 7

基于 Jim Halls 的解决方案和评论。/sf/answers/3083598381/。

我另外添加了一个元素，flex 1 1 0%以确保当容器未满时文本从容器顶部开始。

// just to add some numbers, so we can see the effect
// the actual solution requires no javascript
let num = 1001;
const container = document.getElementById("scroll-container");
document.getElementById("adder").onclick = () =>
  container.append(
    Object.assign(document.createElement("div"), {
      textContent: num++
    })
  );

.scroll-wrapper {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  border: 1px solid black;
}

.scroll-start-at-top {
  flex: 1 1 0%;
}

<div class="scroll-wrapper">
  <span class="scroll-start-at-top"></span>
  <div id="scroll-container">
    <div>1000</div>
  </div>
</div>

<button id="adder">Add Text</button>

Answer 8

.cont{
height: 100px;
overflow-x: hidden;
overflow-y: auto;
transform: rotate(180deg);
direction:rtl;
text-align:left;
}
ul{
overflow: hidden;
transform: rotate(180deg);
}

<div class="cont"> 
 <ul>
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>  
 </ul>
</div>

1. Run code snippet看看效果。（PS：如果Run code snippet不工作，试试这个：https : //jsfiddle.net/Yeshen/xm2yLksu/3/）

2. 它是如何工作的：

默认溢出是从上到下滚动。

transform: rotate(180deg) 可以让它从下到上滚动或加载动态块。

3. 创见：

https://blog.csdn.net/yeshennet/article/details/88880252

Answer 9

这是基于Ryan Hunt 的博客文章的解决方案。它取决于overflow-anchorCSS 属性，该属性将滚动位置固定到滚动内容底部的元素。

function addMessage() {
  const $message = document.createElement('div');
  $message.className = 'message';
  $message.innerText = `Random number = ${Math.ceil(Math.random() * 1000)}`;
  $messages.insertBefore($message, $anchor);

  // Trigger the scroll pinning when the scroller overflows
  if (!overflowing) {
    overflowing = isOverflowing($scroller);
    $scroller.scrollTop = $scroller.scrollHeight;
  }
}

function isOverflowing($el) {
  return $el.scrollHeight > $el.clientHeight;
}

const $scroller = document.querySelector('.scroller');
const $messages = document.querySelector('.messages');
const $anchor = document.querySelector('.anchor');
let overflowing = false;

setInterval(addMessage, 1000);

.scroller {
  overflow: auto;
  height: 90vh;
  max-height: 11em;
  background: #555;
}

.messages > * {
  overflow-anchor: none;
}

.anchor {
  overflow-anchor: auto;
  height: 1px;
}

.message {
  margin: .3em;
  padding: .5em;
  background: #eee;
}

<section class="scroller">
  <div class="messages">
    <div class="anchor"></div>
  </div>
</section>

请注意，overflow-anchor目前在 Safari 中不起作用。