पृष्ठ लोड (div) पर div के नीचे स्क्रॉल करें

238

मेरे पेज पर एक div है:

<div id='div1' style='overflow:scroll;overflow-x:hidden;max-height:200px;'></div>

मैं div को नीचे की तरफ स्क्रॉल कैसे कर सकता हूँ ?? पृष्ठ नहीं, सिर्फ DIV।

jquery html

— DobotJr
स्रोत

610

यहां अन्य समाधान वास्तव में बहुत सारी सामग्री के साथ divs के लिए काम नहीं करते हैं - यह "मैक्स को बाहर कर देता है" (यह div की सामग्री की ऊंचाई के बजाय) की ऊंचाई तक स्क्रॉल करता है । इसलिए वे तब तक काम करेंगे, जब तक कि आपके भीतर सामग्री में div की ऊँचाई दोगुनी से अधिक न हो।

यहाँ सही संस्करण है:

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

या jQuery 1.6+ संस्करण:

var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));

या एनिमेटेड:

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

— माइक टॉड
स्रोत

5

यह भी काम करता है: $ ('# div1')। स्क्रॉलटॉप ($ ('# div1')। attr ("स्क्रॉलहाइट"));

— माइक टॉड

2

पूर्ण ऊंचाई (px में) के बिना यह कार्य कैसे करें div1?

— जन्नत

बहुत बढ़िया! मैं स्क्रॉल करने के लिए एक स्निपेट की तलाश में था और सभी मुझे पेज स्क्रॉलिंग (html, बॉडी) मिल सकते थे। यह एक शानदार समाधान है और स्क्रॉलहाइट का उपयोग करना यह सुनिश्चित करने का एक शानदार तरीका है कि यह हमेशा नीचे तक पहुंचे।

— केविन मैरिट

अद्भुत, दूसरा यह ऐसा काम करता है:d = $('#div1'); $(d).scrollTop( $(d).prop("scrollHeight") );

— loretoparisi

56

सभी उत्तर जो मैं यहां देख सकता हूं, जिनमें वर्तमान में "स्वीकृत" एक भी शामिल है, वास्तव में गलत है कि वे सेट करते हैं:

scrollTop = scrollHeight

जबकि सही दृष्टिकोण सेट करना है:

scrollTop = scrollHeight - clientHeight

दूसरे शब्दों में:

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

या एनिमेटेड:

$("#div1").animate({
  scrollTop: $('#div1')[0].scrollHeight - $('#div1')[0].clientHeight
}, 1000);

— patspam
स्रोत

मेरे पास एक सेट ऊंचाई है और ऑटो के लिए अतिप्रवाह सेट है। एनिमेटेड उत्तरों ने काम किया लेकिन यह एकमात्र गैर-एनिमेटेड समाधान है जो वास्तव में "सामग्री" के नीचे तक स्क्रॉल करेगा, न कि div की निर्धारित ऊंचाई। वाहवाही!

— डार्कलोकी

23

अद्यतन: एक पूर्ण उत्तर के लिए माइक टॉड का समाधान देखें ।

$("#div1").animate({ scrollTop: $('#div1').height()}, 1000);

अगर आप चाहते हैं कि यह एनिमेटेड (1000 मिलीसेकंड से अधिक) हो।

$('#div1').scrollTop($('#div1').height())

अगर आप इसे तात्कालिक चाहते हैं।

— एलेक्सिस कबूतर
स्रोत

8

गलत! .height () प्रदर्शित क्षेत्र तक सीमित है, .prop ("स्क्रॉलहाइट") div की वास्तविक ऊंचाई है।

— सूचक नल

5

पूर्ण रूप से! इसीलिए माइक टॉड का उत्तर स्वीकार है, मेरा नहीं।

— एलेक्सिस कबूतर

15

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

यह पृष्ठ की ऊंचाई पकड़ लेता है और विंडो लोड होने के बाद इसे नीचे स्क्रॉल करता है। पृष्ठ तैयार होने के बाद 1000आपको जो कुछ भी करने की आवश्यकता है उसे तेज़ी से / धीमी गति से बदलें ।

— कॉर्ड्स
स्रोत

यह पूरे पृष्ठ को सही स्क्रॉल करता है? मैं बस इतना चाहता हूं कि div को नीचे की तरफ स्क्रॉल करना चाहिए।

— डोबोटजेर

2

टच। एक ही तर्क, अलग चयनकर्ता।

— कॉर्ड्स

7

इसे इस्तेमाल करे:

$('#div1').scrollTop( $('#div1').height() )

— अपरिभाषित
स्रोत

5

स्क्रॉल विंडो को लक्ष्य div के नीचे तक।

function scrollToBottom(id){
  div_height = $("#"+id).height();
  div_offset = $("#"+id).offset().top;
  window_height = $(window).height();
  $('html,body').animate({
    scrollTop: div_offset-window_height+div_height
  },'slow');
}

scrollToBottom('call_div_id');

— jenking
स्रोत

5

निम्नलिखित काम करेगा। कृपया ध्यान दें [0]औरscrollHeight

$("#myDiv").animate({ scrollTop: $("#myDiv")[0].scrollHeight }, 1000);

— लाल कोटक
स्रोत

5

jquery में चेतन के लिए (संस्करण> 2.0)

var d = $('#div1');
d.animate({ scrollTop: d.prop('scrollHeight') }, 1000);

— dpineda
स्रोत

4

इनमें से किसी ने भी मेरे लिए काम नहीं किया, मेरे पास एक मेसेजिंग सिस्टम है जो एक वेब ऐप के अंदर है जो फेसबुक मैसेंजर के समान है और चाहता था कि मैसेज डिव के नीचे दिखाई दें।

इसने एक इलाज किया, मूल जावास्क्रिप्ट।

window.onload=function () {
     var objDiv = document.getElementById("MyDivElement");
     objDiv.scrollTop = objDiv.scrollHeight;
}

— जेम्स ब्लाचफोर्ड
स्रोत

1

आपके पास संभवतः jQuery स्थापित नहीं है। आप मूल डोम के साथ काम कर रहे हैं, वे jQuery का उपयोग कर रहे हैं। jquery.com

— csga5000

बहुत साफ और सुरुचिपूर्ण समाधान।

— दिव्यांशु दास

2

मैं एक विरासत कोडबेस में काम कर रहा हूं जो Vue की ओर पलायन कर रहा है।

मेरी विशिष्ट स्थिति में (बूटस्ट्रैप मोडल में लिपटे स्क्रॉल करने योग्य div), एक v-if नई सामग्री दिखाई गई, जिसे मैं पृष्ठ को नीचे स्क्रॉल करना चाहता था। इस व्यवहार को काम करने के लिए, मुझे री-रेंडरिंग समाप्त करने के लिए प्रतिज्ञा का इंतजार करना पड़ा, और फिर मॉडल के नीचे स्क्रॉल करने के लिए jQuery का उपयोग करना पड़ा।

इसलिए...

this.$nextTick(function() {
    $('#thing')[0].scrollTop = $('#thing')[0].scrollHeight;
})

— मावरिक लाकसो
स्रोत

0

आप पृष्ठ लोड पर div से नीचे स्क्रॉल करने के लिए नीचे दिए गए कोड का उपयोग कर सकते हैं।

$(document).ready(function(){
  $('div').scrollTop($('div').scrollHeight);
});

— मनीष नागदेवानी
स्रोत

0

आप नीचे दिए गए कोड की तरह स्क्रॉल करने के लिए स्क्रॉलटॉप के साथ स्क्रॉलहाइट और क्लाइंटहाइट की जांच कर सकते हैं।

$('#div').scroll(function (event) {
  if ((parseInt($('#div')[0].scrollHeight) - parseInt(this.clientHeight)) == parseInt($('#div').scrollTop())) 
  {
    console.log("this is scroll bottom of div");
  }
  
});

स्निपेट का विस्तार करें

— Nghi
स्रोत

हमेशा समाधान प्रदान करने से पहले अपने कोड का परीक्षण करें।

— लक्ष्मी

-2

जब पृष्ठ लोड होता है तो स्क्रॉल अधिकतम मूल्य होता है।

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

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

छवि देखें

— चंदन सिंह
स्रोत