Divun sonuna getmək?

Raylardakı ajax istəklərini istifadə edərək bir söhbət yaratıram və bir çox şans olmadan aşağıya doğru sürüşməyə çalışıram.

Bu divda hər şeyə sarılıram:

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

JS-dən istifadə edərək, onu aşağıya keçmək üçün bir yol varmı?

Bir ajax sorğusundan sonra aşağıya keçmək üçün bir yol varmı?

667
07 нояб. dMix 07 noyabrda təyin olundu . 2008-11-07 01:37 '08 saat 01:37 'da 2008-11-07 01:37
ответ 21 cavab

Saytımda istifadə etdiyim şey:

 var objDiv = document.getElementById("your_div"); objDiv.scrollTop = objDiv.scrollHeight; 
1082
07 нояб. Jeremy Ruten tərəfindən verilmiş cavab 07 Nov. 2008-11-07 01:42 '08 saat 01:42 'da 2008-11-07 01:42

JQuery istifadə edərkən bu daha asandır:

border=0
 $("#mydiv").scrollTop($("#mydiv")[0].scrollHeight); 
329
19 апр. Cavab verilir 19 apr. 2010-04-19 05:17 '10 at 5:17 2010-04-19 05:17

jQuery məqsədi ilə istifadə:

 $('#DebugContainer').stop().animate({ scrollTop: $('#DebugContainer')[0].scrollHeight }, 800); 
86
12 сент. Cavab DadViegas 12 sep verilir . 2012-09-12 18:00 '12 saat 18.00 'də, 2012-09-12 18:00' də

Aşağıdakı kodu istifadə edə bilərsiniz:

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

Rəvan keçmək üçün aşağıdakı kodu istifadə edin (jQuery tələb olunur):

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

JSFiddle üzərində nümunəyə baxın

Və necə işləyir:

2019

Bütün mövcud brauzerlərdə işləyən daha yeni bir metod:

 this.scrollIntoView(false); 
20
10 окт. Cavab tnt-rox 10 oct verilir. 2014-10-10 10:08 '14 at 10:08 2014-10-10 10:08

scrollHeight etibar etmək scrollHeight , aşağıdakı kod kömək edir:

 $('#scroll').scrollTop(1000000); 
10
10 июня '14 в 13:58 2014-06-10 13:58 Cavab Benny Neugebauer tərəfindən 10 İyun 'da 13:58' də veriləcək 2014-06-10 13:58

Çox faydalı tapdım thanks.

Köşedeki insanlar üçün 1.X:

6
15 сент. Cavab verilir devonj 15 sep . 2015-09-15 20:56 '15 at 8:56 pm 2015-09-15 20:56

JQuery scrollTop istifadə hər hansı bir element üçün scollbarın şaquli mövqeyini təyin etmək üçün istifadə olunur. Animasiya və müxtəlif seçimlər ( demolar ) ilə hərəkət etmək üçün istifadə olunan jquery scrollTo plugin də var

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

aşağı hərəkət edərkən animasiya əlavə etmək üçün jQuery animasiya metodunu istifadə etmək istəyirsinizsə, aşağıdakı parçanı yoxlayın:

 var myDiv = $("#div_id").get(0); myDiv.animate({ scrollTop: myDiv.scrollHeight }, 500); 
6
19 нояб. Cavab 19 noyabr tarixində msoliman tərəfindən verilir. 2014-11-19 22:40 '14 at 10:40 pm 2014-11-19 22:40

kiçik əlavə: yalnız son xətt artıq görünür olduqda kaydırır. əgər kiçik bir yerə keçsəniz, məzmunu olduğu yerdə tərk etsin (diqqət: müxtəlif font ölçüləri ilə yoxlanılmadı, bəlkə də bəzi düzəlişlər "> = müqayisə" daxilində):

 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; 
4
03 июля '14 в 16:58 2014-07-03 16:58 Cavab Bruno Jennrich tərəfindən 03 iyul 'da 16:58' də verilir 2014-07-03 16:58

Bir bonus parça olaraq. Mən açısal istifadə edir və istifadəçi istifadəçilərlə müxtəlif söhbətləri seçdikdə mesaj axınının altına hərəkət etməyə çalışdıq. Yeni məlumatlardan sonra scrolling işinin ng-təkrar mesajlarını istifadə edərək, div-ə yüklənməsini təmin etmək üçün, keçid fraqmentini bir zaman aşımına vurun.

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

Bu, məlumatların DOM-a daxil edildikdən sonra sürüşmə hadisəsinin tetiklenmesini təmin edəcəkdir.

4
21 авг. cavab cümə axşamı 21-də verilir . 2014-08-21 15:41 '14 at 15:41 2014-08-21 15:41

Javascript və ya jquery:

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

Css:

  .messages { height: 100%; overflow: auto; } 
4
18 июля '16 в 21:44 2016-07-18 21:44 Cavab Lay Layangsros 18 iyul, 21 saat 21:44 2016-07-18 21:44 tarixində verilir

Ayrıca, jQuery istifadə edərək html,body sənədin html,body bir animasiya əlavə edə bilərsiniz:

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

"div-id" ilə divun yuxarı hissəsindəki düz sürüşməyə səbəb olacaq.

3
28 окт. 28 oktyabrda John Dunne tərəfindən verilmiş cavab 2015-10-28 21:17 '15 at 21:17 2015-10-28 21:17

Bu, sənədin hündürlüyünə görə aşağıya doğru aşağıya keçmək üçün imkan verir.

 $('html, body').animate({scrollTop:$(document).height()}, 1000); 
3
13 авг. Cavab 13 Avqustda Navaneeth tərəfindən verildi . 2015-08-13 06:41 '15 'də 6:41 ' da, 2015-08-13 06:41

Eyni problemə qaçdım, ancaq əlavə bir məhdudiyyət vardı: kod yığma konteynerinə yeni elementlər əlavə edən kod yox idi. Burada tapdığım nümunələrdən heç biri mənə bunu etməyə icazə vermədi. Burada məzun olduğum bir həlldir.

Mutation Observers ( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) istifadə edir, bu yalnız müasir brauzerlərdə istifadə etməyə imkan verir (siyasət olsa da)

Belə ki, əsasən, kod tam olaraq belədir:

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

Konsepsiyanı göstərmək üçün skripka yaratdım: https://jsfiddle.net/j17r4bnk/

2
09 окт. Benkinass tərəfindən verilmiş cavab 09 oktyabr 2015-10-09 09:59 '15 at 9:59 2015-10-09 09:59

Java skripti:

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

Son məzmun xəttinə keçin.

1
24 окт. 24 oktyabrda Barath tərəfindən verilmiş cavab 2017-10-24 19:25 '17 saat 7:25 'də 2017-10-24 19:25

Çox sadə bir üsul, scroll'i divun hündürlüyünə təyin etməkdir.

 var myDiv = document.getElementById("myDiv"); window.scrollTo(0, myDiv.innerHeight); 
1
26 окт. Cubetastic tərəfindən verilmiş cavab Oct 26. 2017-10-26 18:56 '17 saat 06:56 'da 2017-10-26 18:56

Çox köhnə bir suala cavabı təmiz Javascript:

 function scrollToElement(id) { let ele = document.getElementById(id); ele.scrollIntoView({behavior: "smooth"}); } 

Yeni elementin idini funksiyaya və voilaya keçin.

0
05 дек. Canenerrix tərəfindən verilmiş cavab 05 dekabr 2018-12-05 15:41 '18 də 3:41 'də 2018-12-05 15:41

Mən bu köhnə bir sual olduğunu bilirəm amma bu həllərin heç biri mənim üçün nəzərdə tutulmadı. Ofset () istifadə edərək bitirdim. Istədiyiniz nəticəni almaq üçün üst. Burada söhbət proqramında sonuncu mesajı yavaş-yavaş hərəkət etmək üçün istifadə etdiyim şeydir:

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

Ümid edirəm ki, bu başqasına kömək edir.

0
12 дек. Cavab BrianLegg tərəfindən verilmişdir 12 dekabr. 2016-12-12 23:09 '16 saat 11:09 ' da 2016-12-12 23:09

Siz aşağıdakıları edə bilərsiniz:

 .logs { max-height: 100px; overflow-y: scroll; font-size: larger; } 
http://jsonwrapper.com/ 

0
28 нояб. Cavab 28 noyabrda Ajay Thakur tərəfindən verilir. 2017-11-28 14:16 '17 at 2:16 pm 2017-11-28 14:16

Div içərisində son elementə keçin:

 myDiv.scrollTop = myDiv.lastChild.offsetTop 
0
03 февр. cavab mjaque verildi 03 fevral. 2019-02-03 11:50 '19 'da saat 11.50' də 2019-02-03 11:50

tags ilə bağlı digər suallar və ya bir sual