滚动到div的底部?

2020/09/20 09:31 · javascript ·  · 0评论

我正在使用Ajax请求创建聊天,并且试图使消息div滚动到底部而没有太多运气。

我在这个div中包装了所有内容:

#scroll {
    height:400px;
    overflow:scroll;
}

有没有一种方法可以使用JS将其默认滚动到底部?

有没有办法在ajax请求之后将其滚动到底部?

这是我在网站上使用的内容:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;

如果您使用的是jQuery scrollTop,这会容易得多

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);

您可以使用以下代码:

function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}

使用JQuery 进行平滑滚动:

function scrollSmoothToBottom (id) {
   var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
}

例子的jsfiddle

这是可行的原因:

在此处输入图片说明

参考:scrollTopscrollHeightclientHeight

使用jQuery animate

$('#DebugContainer').stop().animate({
  scrollTop: $('#DebugContainer')[0].scrollHeight
}, 800);

适用于所有当前浏览器的较新方法

this.scrollIntoView(false);
var mydiv = $("#scroll");
mydiv.scrollTop(mydiv.prop("scrollHeight"));

jQuery 1.6的作品

https://api.jquery.com/scrollTop/

http://api.jquery.com/prop/

使用JavaScript 平滑滚动:

document.getElementById('messages').scrollIntoView({ behavior: 'smooth', block: 'end' });

如果您不想依赖scrollHeight,以下代码会有所帮助:

$('#scroll').scrollTop(1000000);

Java脚本:

document.getElementById('messages').scrollIntoView(false);

滚动到当前内容的最后一行。

使用jQuery,scrollTop用于设置任何给定元素的scollbar的垂直位置。还有一个不错的jquery scrollTo插件,用于滚动动画和其他选项(演示

var myDiv = $("#div_id").get(0);
myDiv.scrollTop = myDiv.scrollHeight;

如果要在向下滚动时使用jQuery的animate方法添加动画,请检查以下代码段:

var myDiv = $("#div_id").get(0);
myDiv.animate({
    scrollTop: myDiv.scrollHeight
  }, 500);

我遇到了同样的问题,但是有一个附加的约束:我无法控制将新元素附加到滚动容器的代码。我在这里找到的所有示例都不允许我这样做。这是我最终得到的解决方案。

它使用Mutation Observershttps://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)使其仅在现代浏览器中可用(尽管存在polyfills)

所以基本上,代码就是这样做的:

var scrollContainer = document.getElementById("myId");

// Define the Mutation Observer
var observer = new MutationObserver(function(mutations) {

  // Compute sum of the heights of added Nodes
  var newNodesHeight = mutations.reduce(function(sum, mutation) {
      return sum + [].slice.call(mutation.addedNodes)
        .map(function (node) { return node.scrollHeight || 0; })
        .reduce(function(sum, height) {return sum + height});
  }, 0);

  // Scroll to bottom if it was already scrolled to bottom
  if (scrollContainer.clientHeight + scrollContainer.scrollTop + newNodesHeight + 10 >= scrollContainer.scrollHeight) {
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
  }

});

// Observe the DOM Element
observer.observe(scrollContainer, {childList: true});

我做了一个小提琴来演示这个概念:https :
//jsfiddle.net/j17r4bnk/

JavaScript或jquery:

var scroll = document.getElementById('messages');
   scroll.scrollTop = scroll.scrollHeight;
   scroll.animate({scrollTop: scroll.scrollHeight});

CSS:

 .messages
 {
      height: 100%;
      overflow: auto;
  }

发现这确实有帮助,谢谢。

对于那里的Angular 1.X人员:

angular.module('myApp').controller('myController', ['$scope', '$document',
  function($scope, $document) {

    var overflowScrollElement = $document[0].getElementById('your_overflow_scroll_div');
    overflowScrollElement[0].scrollTop = overflowScrollElement[0].scrollHeight;

  }
]);

只是因为jQuery元素与HTML DOM元素的包装在角度上有些混乱。

同样对于聊天应用程序,我发现在加载聊天记录后进行此分配很有用,您可能还需要在短暂的超时时间内加油。

小附录:仅滚动(如果最后一行已经可见)。如果滚动一点,则将内容保留在原处(注意:未使用不同的字体大小进行测试。这可能需要在“> =比较内进行一些调整”):

var objDiv = document.getElementById(id);
var doScroll=objDiv.scrollTop>=(objDiv.scrollHeight-objDiv.clientHeight);                   

// add new content to div
$('#' + id ).append("new line at end<br>"); // this is jquery!

// doScroll is true, if we the bottom line is already visible
if( doScroll) objDiv.scrollTop = objDiv.scrollHeight;

就像奖金片段一样。我正在使用angular,并且在用户选择与用户的不同对话时尝试将消息线程滚动到底部。为了确保在使用ng-repeat消息将新数据加载到div后,滚动条可以正常工作,只需将滚动条包装在超时中即可。

$timeout(function(){
    var messageThread = document.getElementById('message-thread-div-id');
    messageThread.scrollTop = messageThread.scrollHeight;
},0)

这将确保在将数据插入DOM之后触发滚动事件。

您还可以使用jQuery html,body通过以下方式将动画添加到文档中:

$("html,body").animate({scrollTop:$("#div-id")[0].offsetTop}, 1000);

这将导致平滑滚动到ID为“ div-id”的div顶部。

这将使您一直向下滚动到文档高度

$('html, body').animate({scrollTop:$(document).height()}, 1000);

您可以像这样使用HTML DOM scrollIntoView方法:

var element = document.getElementById("scroll");
element.scrollIntoView();

我的场景:我有一个字符串列表,其中必须添加用户给出的字符串,然后自动滚动到列表的末尾。我将列表的显示高度固定为固定值,此后它应该溢出。

我尝试了@Jeremy Ruten的答案,它起作用了,但是它正在滚动到第(n-1)个元素。如果有人遇到此类问题,则可以使用setTimeOut()方法解决方法。您需要将代码修改如下:

setTimeout(() => {
    var objDiv = document.getElementById('div_id');
    objDiv.scrollTop = objDiv.scrollHeight
}, 0)

这是我创建的StcakBlitz链接,其中显示了问题及其解决方案:https ://stackblitz.com/edit/angular-ivy-x9esw8

一种非常简单的方法是将设置scroll to为div的高度。

var myDiv = document.getElementById("myDiv");
window.scrollTo(0, myDiv.innerHeight);

滚动到div中的最后一个元素:

myDiv.scrollTop = myDiv.lastChild.offsetTop

在我的Angular 6应用程序中,我只是这样做了:

postMessage() {
  // post functions here
  let history = document.getElementById('history')
  let interval    
  interval = setInterval(function() {
    history.scrollTop = history.scrollHeight
    clearInterval(interval)
  }, 1)
}

clearInterval(interval)函数将停止计时器,以允许手动滚动顶部/底部。

我知道这是一个老问题,但是这些解决方案都不适合我。我最终使用offset()。top获得所需的结果。这是我用来将屏幕轻轻向下滚动到聊天应用程序中的最后一条消息的方法:

$("#html, body").stop().animate({
     scrollTop: $("#last-message").offset().top
}, 2000);

我希望这可以帮助其他人。

如果这样做是为了滚动到聊天窗口的底部,请执行以下操作

在聊天中滚动到特定div的想法如下

1)由Person,time和message组成的每个聊天div在带有类chatContentbox的for循环中运行

2)querySelectorAll查找所有此类数组。可能是400个节点(400个聊天)

3)转到最后一个

4)scrollIntoView()

let lastChatBox = document.querySelectorAll('.chatContentBox'); 
lastChatBox = lastChatBox[lastChatBox.length-1]; 
lastChatBox.scrollIntoView(); 

将距可滚动元素顶部的距离设置为元素的总高度。

const element = this.shadowRoot.getElementById('my-scrollable-div')
element.scrollTop = element.scrollHeight

和您一样,我正在构建一个聊天应用程序,并希望将最新消息滚动到视图中。最终对我来说效果很好:

//get the div that contains all the messages
let div = document.getElementById('message-container');

//make the last element (a message) to scroll into view, smoothly!
div.lastElementChild.scrollIntoView({ behavior: 'smooth' });

用 :

var element= $('element');
var maxScrollTop = element[0].scrollHeight - element.outerHeight();
element.scrollTop(maxScrollTop);

或检查滚动到底部:

    var element = $(element);
    var maxScrollTop = element[0].scrollHeight - element.outerHeight();
    element.on('scroll', function() {
        if ( element.scrollTop() >= maxScrollTop ) {
            alert('scroll to bottom');
        }
    });

有时,最简单的方法是最好的解决方案:我不知道这是否会有所帮助,它可以帮助我滚动所需的内容。“ y =“越高,它向下滚动的越多,当然“ 0”表示顶部,因此例如“ 1000”可以在底部,或者“ 2000”或“ 3000”,依此类推,具体取决于您页面是。通常在带有onclick或onmouseover的按钮中起作用。

window.scrollTo(x=0,y=150);
本文地址:http://javascript.askforanswer.com/gundongdaodivdedibu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

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

上一篇:
下一篇:

评论已关闭!