मैं अपने स्वयं के स्क्रॉलबार के साथ प्रोग्रामेटिक रूप से एक div कैसे स्क्रॉल कर सकता हूं?

Question

मेरे पास एक HTML पृष्ठ है जिसमें सामग्री के लिए उपयोग की जाने वाली आंतरिक DIV है। आंतरिक डीआईवी के अपने स्क्रॉलबार हैं। मैं डीआईवी में एक निश्चित स्थिति में स्वचालित रूप से स्क्रॉल करना चाहता हूं।

मैं यह कैसे कर सकता हूं?

एक क्रॉस मंच समाधान की जरूरत है

Answer 1

div एक scrollTop संपत्ति आप सेट कर सकते हैं कि है (और उसके दोस्त - (नोट करते हैं कि मैं नहीं विंडो स्क्रॉलबार स्क्रॉल ऑटो करना चाहते हैं मैं पहले से ही ऐसा करने के तरीके जानते हैं) , scrollLeft)।

• jsFiddle Demo

• scrollTop on MDN

• scrollLeft on MDN

Answer 2

इस .scrollTo() विधि है जो मदद कर सकते हैं अपने divs के माध्यम से स्क्रॉल है। अधिक जानकारी के लिए यह कोशिश की यात्रा here

Answer 3

एक div जोड़ें (जहाँ आप स्क्रॉल करने के लिए चाहते हैं):

<div id="#scroll-here">Test..</div> 

और इस तरह एक लिंक जोड़ने:

<a href="#scroll-here">Scroll to Test</a> 

आप एक चिकनी स्क्रॉल अगर आप चाहते हैं this

Answer 4

जब तक जावास्क्रिप्ट स्वीकार्य है, मैंने demo using jQuery बनाया जो 01 के अंदर एक आईडी के साथ ज्ञात तत्व का उपयोग करता है।

$(function() { 
    var testOffset = $('#test').offset(), 
     scrollOffset = $('#scroll').offset(); 
    $('#scroll').scrollTop(testOffset.top - scrollOffset.top); 
});​ 

आप केवल पता कितनी दूर, पिक्सल के संदर्भ में है, बजाय किसी विशिष्ट तत्व के लिए, यह करने के लिए अनुकूलित किया जा सकता है:

$(function() { 
    $('#scroll').scrollTop(100); 
});​ 

Answer 5

मैं scrollTo jQuery plugin पर एक नज़र रखने की सलाह देते हैं। यह वास्तव में एक आसान प्लगइन है जो आपको किसी तत्व के भीतर स्क्रॉल को एनिमेट करने की अनुमति देता है। मैंने jsFiddle में एक छोटा सा उदाहरण स्थापित किया है जो दर्शाता है कि यह कैसे काम करता है। उदाहरण दिखाता है कि आप पहले div में तीसरे p में "स्क्रॉल" कैसे करते हैं, और फिर दूसरे div में दूसरा p। ध्यान देने योग्य एक बात यह है कि यह सुनिश्चित करने के लिए कि position().top सही है, आपको position: relative; रखने के लिए div सेट करना होगा। उम्मीद है कि हालांकि यह एक समस्या का बहुत अधिक नहीं है। :)