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

2020/10/11 19:01 · javascript ·  · 0评论

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

是否有可能使div保持滚动到底部,除非用户向上滚动,并且当用户滚动回到底部时,即使添加了新的动态内容,它也需要保持在底部。我将如何创建这个。

这可能对您有帮助:

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

我只能使用CSS进行此操作。

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

浏览器将底部视为顶部。假设您要定位的浏览器受支持flex-box,唯一的警告是标记必须按相反顺序排列。

这是一个工作示例。https://codepen.io/jimbol/pen/YVJzBg

我刚刚实现了这一点,也许您可​​以使用我的方法。

假设我们有以下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/

编辑:添加了代码片段以澄清何时isScrolledToBottomtrue

将滚动条固定到底部

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>
$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

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

在2020年,您可以使用css snap,但是在Chrome 81之前,布局更改不会触发重新快照纯CSS聊天ui可以在Chrome 81上运行,您还可以选中我可以使用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;,向上滚动更容易。

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

Or animated:

$("#div1").animate({ scrollTop: $('#div1')[0].scrollHeight}, 1000);
.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) 可以使其从下到上滚动或加载动态块。

  1. 创见:

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

$('#yourDivID').animate({ scrollTop: $(document).height() }, "slow");
return false;

这将从#yourDivID使用该$(document).height()属性的高度计算ScrollTop位置,以便即使将动态内容添加到div中,滚动条也将始终位于底部位置。希望这可以帮助。但是,即使我们向上滚动并从滚动条上移开鼠标指针,它也会有一个小错误,它将自动到达底部位置。如果有人可以纠正,那也很好。

这是一个基于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中不起作用。

//Make sure message list is scrolled to the bottom
var container = $('#MessageWindowContent')[0];
var containerHeight = container.clientHeight;
var contentHeight = container.scrollHeight;

container.scrollTop = contentHeight - containerHeight;

这是我基于dotnetCarpenter回答的版本。我的方法是使用纯jQuery,并命名了变量以使事情更清楚。发生的情况是,如果内容高度较大,则容器向下滚动额外的距离即可达到所需的结果。

在IE和chrome中工作。

Jim Hall的答案是可取的,因为当您向上滚动时确实不会滚动到底部,但它也是纯CSS。

但是,非常不幸的是,这不是一个稳定的解决方案:在chrome中(可能是由于上述dotnetCarpenter描述的1像素问题)scrollTop,即使没有用户交互(在添加元素时),其行为也不正确,只有1个像素。您可以设置scrollTop = scrollHeight - clientHeight,但是当添加另一个元素时,它将保持div的位置,也就是“保持自身在底部”功能不再起作用。

因此,简而言之,添加少量Javascript(叹气)将解决此问题并满足所有要求:

https://codepen.io/anon/pen/pdrLEZ这样的内容(例如Coo的例子),然后在列表中添加元素后,还会显示以下内容:

container = ...
if(container.scrollHeight - container.clientHeight - container.scrollTop <= 29) {
    container.scrollTop = container.scrollHeight - container.clientHeight;
}

其中29是一行的高度。

因此,当用户向上滚动半行(是否还可以吗?)时,Javascript将忽略它并滚动到底部。但是我想这是可以忽略的。并且,它可以修复Chrome 1 px的问题。

你可以用这样的东西

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

这是我的处理方法。我的div高度是650px。我决定,如果滚动高度在底部的150px以内,则自动滚动它。否则,将其留给用户。

if (container_block.scrollHeight - container_block.scrollTop < 800) {
                    container_block.scrollTo(0, container_block.scrollHeight);
}
本文地址:http://javascript.askforanswer.com/chufeiyonghuxiangshanggundongfouzejiangyichudivgundongdaodibu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!