Div के नीचे स्क्रॉल करें?

Question

मैं रेल में अजाक्स अनुरोधों का उपयोग करके एक चैट बना रहा हूं और मैं बहुत किस्मत के बिना नीचे स्क्रॉल करने के लिए एक div प्राप्त करने की कोशिश कर रहा हूं।

मैं इस div में सब कुछ लपेट रहा हूं:

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

क्या जेएस का उपयोग करके डिफ़ॉल्ट रूप से इसे नीचे तक स्क्रॉल करने का एक तरीका है?

क्या अजाक्स अनुरोध के बाद इसे नीचे तक स्क्रॉल करने का एक तरीका है?

Answer 1

यहाँ मैं अपनी साइट पर क्या उपयोग कर रहा हूँ:

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

Comments

क्या यह विधि सभी ब्राउज़रों के साथ ठीक है?

— जॉन्डिंघम

@PaDDinh: मैंने अभी इस पर ध्यान दिया है और IE7 के साथ एक समस्या है और स्क्रॉलहाइट का उपयोग करके कम है। यहाँ IE7 के लिए चारों ओर एक काम प्रतीत होता है ।

— शॉन

डायव के अंदर तत्वों को गतिशील रूप से जोड़ने के बाद यह काम क्यों नहीं करता है?

— विंस

@ विंस - यह एक बार की डील है। यदि आप सामग्री बदलते हैं, तो आपको फिर से निष्पादित करना होगा। कमांड मूल रूप से कहता है "स्क्रॉल पट्टी को इस स्थिति में ले जाएं"।

— DrFriedParts 23

और इसके अलावा, यदि आपके पास उदाहरण के लिए div के अंदर तत्व हैं, तो आप किसी विशेष तत्व को देखने के लिए स्क्रॉल कर सकते हैं। (अर्थात मूल जनक div के अंदर तत्व दिखाई देता है) .. इस तरह: $ ("#" + instID) .scrollTop ($ ("#" + instID) [0] .scrollIntoView);

— 6

Answer 2

यदि आप jQuery स्क्रॉलटॉप का उपयोग कर रहे हैं तो यह बहुत आसान है :

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

Comments

यह कैसे आसान है?

— कप्तानी

2 के बजाय 1 लाइन? कोई सुराग नहीं है, लेकिन आप JQuery के साथ आसानी से क्या कर सकते हैं, इस तरह की क्रिया चेतन है: $ ("# div-id")। चेतन ({स्क्रॉलटॉप: $ ("# div-id") [0] .scrollHeet}, 1000 ); उम्मीद है कि यह किसी को भी मदद करता है :)

— शमूएल

आप [0] डोम तत्व jQuery तत्व से scrollHeight प्राप्त करने के लिए प्राप्त करने की आवश्यकता

— जिमी Bosse

"JQ का उल्लेख नहीं करना पढ़ने / समझने में कठिन है!" विशुद्ध रूप से एक राय। उदाहरण के लिए, मुझे JQuery को पढ़ने, समझने और सामान के साथ करने में बहुत आसान लगता है। और यह समाधान बेहतर है यदि आप वैसे भी JQuery का उपयोग कर रहे हैं।

— हन्ना

खुद को दोहराए बिना:$("#mydiv").scrollTop(function() { return this.scrollHeight; });

— एरिक

Answer 3

आप निम्नलिखित कोड का उपयोग कर सकते हैं:

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 पर उदाहरण देखें

यहाँ यह क्यों काम करता है:

रेफरी: scrollTop , scrollHeight , clientHeight

Answer 4

jQuery चेतन का उपयोग :

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

Comments

इस टिप्पणी में सैम ने क्या कहा । यह एक वास्तविक जवाब में अधिक उपयोगी है, हालांकि!

— क्वेंटिन प्रदीप

ध्यान दें कि यह उत्तर .stop () का उपयोग कैसे करता है , जो कई एनिमेशन वाले मुद्दों को रोकता है।

— kalyfe

हैरानी की बात है कि यह केवल एक ही है जो मेरे लिए सभी प्रतिक्रियाओं से पहले काम करता है। यह इस कारण से हो सकता है कि कैसे मेरी अन्य

— डिबियों

यह केवल एक था जिसने मेरे लिए काम किया (मैं चित्र जोड़ रहा हूं, पाठ नहीं)

— जॉन ktejik

Answer 5

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

JQuery 1.6 से काम करता है

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

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

Comments

यह समाधान उन तत्वों के लिए काम करता है जिनके पास एक अद्वितीय सीएसएस वर्ग अभी तक कोई सीएसएस आईडी नहीं है। शीर्ष टिप्पणी का समाधान सीएसएस वर्ग के साथ काम नहीं करता है।

— 20

Answer 6

नई विधि जो सभी वर्तमान ब्राउज़रों पर काम करती है :

this.scrollIntoView(false);

Comments

लगता है कि यह केवल फ़ायरफ़ॉक्स पर काम करता है: developer.mozilla.org/en/docs/Web/API/Element/…

— अमृत ​​कहलाना

समर्थन वास्तव में एटीएम की कमी है, लेकिन अगर यह स्वीकार किया जाता है, तो यह भयानक होगा।

— कृत्जन लीवा

कोई सुधार? मुझे लगता है कि इसे अच्छे उत्तर के रूप में स्वीकार किया जाना चाहिए। मेरा मतलब है कि jQuery पर आते हैं?

— lkahtz

काम कर रहा है: document.querySelector ("। mdl-list")। scrollIntoView (झूठा);

— जोहान मदीना

Answer 7

जावास्क्रिप्ट के साथ चिकनी स्क्रॉल:

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

Answer 8

यदि आप पर भरोसा नहीं करना चाहते हैं scrollHeight, तो निम्न कोड मदद करता है:

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

Comments

उपरोक्त समाधानों में से कोई भी, आपका नहीं, Android पर फ़ायरफ़ॉक्स पर काम करने लगता है ... कोई विचार कृपया?

— काया टोस्ट

कोई बात नहीं, मैं बहुत बड़ी संख्या ( 1E10) का उपयोग कर रहा था । एक छोटी संख्या काम करती है

— andrewtweber

यह हमेशा मायने रखता है

— बेन टालियाडोरोस 14

यह खराब प्रदर्शन क्यों होगा? ऐसा नहीं है कि यह प्रत्येक पिक्सेल पर पुनरावृत्ति कर रहा है। अब बुरा अभ्यास एक और सवाल है ...

— devios1

$ ('# स्क्रॉल')। स्क्रॉलटॉप (इन्फिनिटी), यह भी तब काम करना चाहिए।

— माधव पौडेल १el ’१

Answer 9

JQuery का उपयोग करके, स्क्रॉलटॉप का उपयोग किसी दिए गए तत्व के लिए स्कोलबार की ऊर्ध्वाधर स्थिति को सेट करने के लिए किया जाता है। एनीमेशन और विभिन्न विकल्पों ( डेमो ) के साथ स्क्रॉल करने के लिए उपयोग किया जाने वाला एक अच्छा jquery स्क्रोल्टो प्लगइन भी है

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

यदि आप नीचे स्क्रॉल करते समय एनीमेशन जोड़ने के लिए jQuery के चेतन विधि का उपयोग करना चाहते हैं , तो निम्नलिखित स्निपेट देखें:

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

Answer 10

मुझे एक ही समस्या का सामना करना पड़ा है, लेकिन एक अतिरिक्त बाधा के साथ: मेरे पास उस कोड पर कोई नियंत्रण नहीं था जो स्क्रॉल कंटेनर में नए तत्वों को जोड़ते थे। मैंने यहां जो भी उदाहरण पाए उनमें से किसी ने भी मुझे ऐसा नहीं करने दिया। यहाँ समाधान मैं के साथ समाप्त हो गया है।

यह Mutation Observers( https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) का उपयोग करता है, जो इसे केवल आधुनिक ब्राउज़रों पर ही उपयोग करने योग्य बनाता है (हालांकि पॉलीफिल मौजूद हैं)

तो मूल रूप से कोड बस यही करता है:

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/

Comments

गतिशील आईडी कैसे प्राप्त करें? जैसे <div class="abc"><div data-bind=attr : {'id': myId } ></div></div>इस कोड में myId एक वैरिएबल है। मैं इस आईडी को स्क्रिप्ट में कैसे एक्सेस कर सकता हूं।

— इरफान युसनीफ

मुझे पूरा यकीन नहीं है कि मैं आपके सवाल को समझ सकता हूँ। मेरे उदाहरण में, "myId" स्क्रॉल कंटेनर की आईडी है। क्या आप एक से अधिक क्षेत्र बनाना चाहते हैं जहां उपयोगकर्ता स्क्रॉल कर सकता है?

— बेन्किनस

Answer 11

जावास्क्रिप्ट या jquery:

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

सीएसएस:

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

Answer 12

यह वास्तव में उपयोगी पाया, धन्यवाद।

कोणीय 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;

  }
]);

सिर्फ इसलिए कि HTML डोम तत्वों बनाम jQuery तत्वों में रैपिंग कोणीय के साथ थोड़ा भ्रमित करता है।

चैट एप्लिकेशन के लिए भी, मैंने पाया कि यह असाइनमेंट आपके चैट उपयोगी होने के बाद लोड होने के बाद, आपको थोड़े समय के लिए थप्पड़ खाने की भी आवश्यकता हो सकती है।

Answer 13

छोटा परिशिष्ट: केवल तभी स्क्रॉल करता है, यदि अंतिम पंक्ति पहले से ही दिखाई देती है। यदि एक छोटा सा स्क्रॉल किया जाता है, तो वह सामग्री छोड़ देता है जहां वह है (ध्यान दें: विभिन्न फ़ॉन्ट आकारों के साथ परीक्षण नहीं किया गया। इसके लिए "> = तुलना" के अंदर कुछ समायोजन की आवश्यकता हो सकती है):

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;

Answer 14

बस एक बोनस स्निपेट के रूप में। मैं कोणीय का उपयोग कर रहा हूं और एक उपयोगकर्ता द्वारा उपयोगकर्ताओं के साथ विभिन्न वार्तालापों का चयन करने पर एक संदेश थ्रेड को नीचे तक स्क्रॉल करने की कोशिश कर रहा था। यह सुनिश्चित करने के लिए कि संदेशों के एनजी-रिपीट के साथ नए डेटा के लोड होने के बाद स्क्रॉल काम करता है, बस स्क्रॉल स्निपेट को टाइमआउट में लपेटें।

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

यह सुनिश्चित करेगा कि डेटा को DOM में डालने के बाद स्क्रॉल इवेंट को निकाल दिया गया है।

Comments

मुझे $ स्कोप पर संदेह है। $ apply (कॉलबैक) काम करेगा और साथ ही यह एक पाचन और दृश्य के पुनर्मूल्यांकन के लिए मजबूर करेगा।

— SStanley

धन्यवाद! मैं वास्तव में सोच रहा था कि मैं इसे काम क्यों नहीं कर पाया और $ टाइमआउट मुद्दा था।

— वेफर जूल

@Wayferer वहीsetTimeout(function() { ... }, n)

— KingRider

Answer 15

आप jQuery का उपयोग करके, एनीमेशन को भी संलग्न कर सकते हैं html,body दस्तावेज़ के माध्यम से :

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

जिसके परिणामस्वरूप आईडी "div-id" के साथ div के शीर्ष पर एक चिकनी स्क्रॉल होगा।

Answer 16

जावा स्क्रिप्ट:

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

मौजूद सामग्री की अंतिम पंक्ति तक स्क्रॉल करता है।

Answer 17

यह आपको दस्तावेज़ ऊंचाई के संबंध में सभी तरह से स्क्रॉल करने देगा

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

Answer 18

इस के लिए एक बहुत ही सरल विधि scroll todiv की ऊंचाई निर्धारित करने के लिए है।

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

Answer 19

Div के अंदर अंतिम तत्व तक स्क्रॉल करें:

myDiv.scrollTop = myDiv.lastChild.offsetTop

Answer 20

मेरे कोणीय 6 आवेदन पर मैंने अभी-अभी यह किया है:

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

ClearInterval (अंतराल) फ़ंक्शन मैन्युअल स्क्रॉल टॉप / बॉटम की अनुमति देने के लिए टाइमर को बंद कर देगा।

Answer 21

मेरा परिदृश्य: मेरे पास स्ट्रिंग की एक सूची थी, जिसमें मुझे एक उपयोगकर्ता द्वारा दिए गए स्ट्रिंग को संलग्न करना था और सूची के अंत में स्वचालित रूप से स्क्रॉल करना था। मैंने सूची के प्रदर्शन की ऊंचाई निर्धारित की थी, जिसके बाद इसे ओवरफ्लो करना चाहिए।

मैंने @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

Answer 22

मुझे पता है कि यह एक पुराना प्रश्न है, लेकिन इनमें से किसी भी समाधान ने मेरे लिए काम नहीं किया। मैंने वांछित परिणाम प्राप्त करने के लिए ऑफ़सेट () का उपयोग कर समाप्त किया। यहां मैंने अपने चैट एप्लिकेशन में अंतिम संदेश को स्क्रीन को धीरे से स्क्रॉल करने के लिए उपयोग किया है :

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

मैं उम्मीद करता हूं कि इससे किसी की मदद होगी।

Answer 23

कभी-कभी सबसे सरल सबसे अच्छा समाधान होता है: मुझे नहीं पता कि क्या यह मदद करेगा, इससे मुझे स्क्रॉल करने में मदद मिली कि क्या मैं कभी भी चाहता था। "Y =" जितना ऊंचा होता है, उतना ही नीचे स्क्रॉल होता है और निश्चित रूप से "0" का मतलब शीर्ष होता है, इसलिए उदाहरण के लिए "1000" नीचे हो सकता है, या "2000" या "3000" और इसी तरह, कितनी देर तक आपके पेज है यह आमतौर पर ओनक्लिक या ऑनमूवर के साथ एक बटन में काम करता है।

window.scrollTo(x=0,y=150);

Answer 24

स्क्रॉल करने योग्य तत्व के शीर्ष से दूरी सेट करें तत्व की कुल ऊंचाई।

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

Comments

यदि यह पहले से मौजूद है तो एक ही समाधान न जोड़ें।

— असोन

हाँ ऐसा न करें कि यदि समाधान पहले से मौजूद है

— ओसवाल्डो

Answer 25

आप इस तरह से HTML DOM scrollIntoView मेथड का उपयोग कर सकते हैं:

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

Answer 26

उपयोग :

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

Comments

scrollTopMax को var maxScrollTop = element में बदलें [0] .scrollHeight - element.outerHeight ();

— महदी बाघेरी

Answer 27

यदि यह चैट विंडो के निचले भाग पर स्क्रॉल करने के लिए किया जा रहा है, तो निम्न कार्य करें

चैट में किसी विशेष div पर स्क्रॉल करने का विचार निम्नलिखित था

1) व्यक्ति, समय और संदेश से युक्त प्रत्येक चैट डिवीजन को क्लास चैट कॉन्टेंटबॉक्स के साथ लूप में चलाया जाता है

2) querySelectorAll को ऐसे सभी सरणियाँ मिलती हैं। यह 400 नोड्स (400 चैट) हो सकता है

3) पिछले एक पर जाएं

4) स्क्रॉलइंटरव्यू ()

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

Comments

कई उत्तर पहले से ही दिए गए हैं scrollIntoView, इसलिए उन्हें अभी और एक जोड़ने की आवश्यकता नहीं है।

— असॉन