滚动到 div 的底部?

I am creating a chat using ajax requests in rails and I'm trying to get a div to scroll to the bottom without much luck.

I am wrapping everything in this div:

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

Is there a way to keep it scrolled to the bottom by default using JS?

Is there a way to keep it scrolled to the bottom after an ajax request?

转载于:https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div

17个回答

Here's what I use on my site:

var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
csdnceshi68
local-host why not scrollTopMax instead of scrollHeight?
接近 2 年之前 回复
weixin_41568174
from.. JQuery: myDiv = $('#myDiv')[0]; myDiv.scrollTop = myDiv.scrollHeight;
接近 3 年之前 回复
csdnceshi62
csdnceshi62 26355:208 Uncaught TypeError: Cannot read property 'scrollHeight' of null(…)
3 年多之前 回复
weixin_41568127
?yb? You have to use either document.querySelector('.xxx') or document.getElementsByClassName('xxx')[0]. The document.querySelector uses CSS selectors to find elements.
4 年多之前 回复
weixin_41568134
MAO-EYE How to get by class name?! I tried | var objDiv = document.getElementByClassName("xxx"); | But not work!
4 年多之前 回复
csdnceshi50
三生石@ How do we animate this scrolling (without jQuery) ?
4 年多之前 回复
csdnceshi67
bug^君 And in addition, if you have elements placed inside a div for instance, you can scroll a particular element into view. (i.e. the element is visible inside the parent div).. like this: $("#" + instanceID).scrollTop($("#" + instanceID)[0].scrollIntoView);
6 年多之前 回复
csdnceshi65
larry*wei If you're lazy like me, you might want to use var objDiv = $("your_div")[0];
6 年多之前 回复
csdnceshi55
~Onlooker -- It's a one-time deal. If you change the content, you will need to re-execute. The command basically says "move the scroll bar to this position".
接近 7 年之前 回复
csdnceshi75
衫裤跑路 Why does it not work after dynamically appending elements inside the div?
大约 7 年之前 回复
csdnceshi80
胖鸭 I just looked into this and there is an issue with IE7 and lower using scrollHeight. There does seem to be a work around for IE7 here.
接近 8 年之前 回复
weixin_41568184
叼花硬汉 is this method ok with all browsers?
8 年多之前 回复

This is much easier if you're using jQuery:

$("#mydiv").scrollTop($("#mydiv")[0].scrollHeight);
csdnceshi54
hurriedly% worked for me in UL tag
接近 4 年之前 回复
csdnceshi71
Memor.の var $ = document.querySelectorAll; flies away
大约 4 年之前 回复
csdnceshi62
csdnceshi62 How is this different from document.getElementById("your_div").scrollTop=document.getElementById("your_div").scrollHeight (Jeremy Ruten's answer but modified to fit on one line) ?
接近 5 年之前 回复
csdnceshi61
derek5. Without repeating yourself: $("#mydiv").scrollTop(function() { return this.scrollHeight; });
6 年多之前 回复
csdnceshi78
程序go Using jQuery does give you the advantage of taking into account cross-browser inconsistencies. And as @andsien indicates, it really only makes sense to use a library for this task if you are already including it in your site.
6 年多之前 回复
csdnceshi56
lrony* "Not to mention the JQ is harder to read/understand!" Purely an opinion. I for instance find JQuery much easier to read, understand, and do stuff with. And this solution IS better if you are using JQuery already anyway.
大约 7 年之前 回复
weixin_41568134
MAO-EYE You remove one line of the solution. . . And replace it with the entire jQuery library? Not to mention the JQ is harder to read/understand!
7 年多之前 回复
csdnceshi70
笑故挽风 No idea how that could be happening, I would need to see sample code
7 年多之前 回复
csdnceshi58
Didn"t forge I don’t need to add several kilobytes of an external library in order to save one line in my code.
7 年多之前 回复
weixin_41568127
?yb? I'm using Chrome v26 btw.
7 年多之前 回复
weixin_41568127
?yb? This works, but in my case it stops working after a certain amount of data in the div. Is there some limit? Does it depend on the height of the div? @Sam
7 年多之前 回复
csdnceshi51
旧行李 you need [0] to get dom element from jquery element to get scrollHeight
大约 8 年之前 回复
weixin_41568131
10.24 Why the [0] if you are grabbing a unique id="mydiv"?
8 年多之前 回复
csdnceshi70
笑故挽风 1 Line instead of 2? no clue, but what you can do easily with JQuery is animate the action like so: $("#div-id").animate({scrollTop:$("#div-id")[0].scrollHeight}, 1000); hope this helps anyone :)
8 年多之前 回复
weixin_41568174
from.. How is this easier?
8 年多之前 回复

Java Script:

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

Scrolls to the last line of the content present.

Newer method :

this.scrollIntoView(false);
csdnceshi80
胖鸭 There is a polyfill iamdustan.com/smoothscroll
2 年多之前 回复
weixin_41568196
撒拉嘿哟木头 Support is indeed lacking atm, but if this gets accepted, then it would be awesome.
3 年多之前 回复
csdnceshi61
derek5. Think this only works on firefox: developer.mozilla.org/en/docs/Web/API/Element/…
大约 4 年之前 回复

Using jQuery, scrollTop is used to set the vertical position of scollbar for any given element. there is also a nice jquery scrollTo plugin used to scroll with animation and different options (demos)

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

if you want to use jQuery's animate method to add animation while scrolling down, check the following snippet:

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

Works from jQuery 1.6

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

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

csdnceshi76
斗士狗 I would argue that jQuery is not at all pure.
接近 2 年之前 回复
csdnceshi77
狐狸.fox "Pure jQuery", heh. How do you determine what's "pure jQuery" and what's just JavaScript?
大约 4 年之前 回复

If you don't want to rely on scrollHeight, the following code helps:

$('#scroll').scrollTop(1000000);
weixin_41568110
七度&光 Why would it be bad performance? It's not like it's iterating over each pixel. Now bad practice is another question…
3 年多之前 回复
csdnceshi68
local-host It always matters
接近 4 年之前 回复
csdnceshi80
胖鸭 BTW, scrollTop(1000000) is bad performance, if it matters.
4 年多之前 回复
weixin_41568183
零零乙 Never mind, I was using too big of a number (1E10). A smaller number works
4 年多之前 回复
weixin_41568183
零零乙 Doesn't work on IE 11
4 年多之前 回复
weixin_41568184
叼花硬汉 None of the above solutions, including yours, seem to work on Firefox on Android ... any thoughts please ?
5 年多之前 回复

You can also, using jQuery, attach an animation to html,body of the document via:

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

which will result in a smooth scroll to the top of the div with id "div-id".

Found this really helpful, thank you.

For the Angular 1.X folks out there:

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;

  }
]);

Just because the wrapping in jQuery elements versus HTML DOM elements gets a little confusing with angular.

Also for a chat application, I found making this assignment after your chats were loaded to be useful, you also might need to slap on short timeout as well.

This will let you scroll all the way down regards the document height

$('html, body').animate({scrollTop:$(document).height()}, 1000);
共17条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问