मुझे पता है कि इस स्क्रॉल प्रभाव को कुछ class/id वाले तत्व पर कैसे प्रभाव डाला जाए। मुझे जो नहीं मिलता वह इस तत्व के ऊपर scroll को 20px पर रोकना है। मैंने ऐसे उदाहरण देखे हैं जो इसे document.getElementById() के साथ करते हैं। इस तरह:

function scrollToJustAbove(element, margin=20) {
  let dims = element.getBoundingClientRect();
  window.scrollTo(window.scrollX, dims.top - margin);
}

लेकिन, मेरे मामले में मुझे एक smooth transition भी चाहिए जो मैं चाहता हूं (जैसे plnrk में मेरा लिंक)। मैं यह कैसे कर सकता हूं?

यह मेरा कोड है:

https://plnkr.co/edit/3NX4FK5QrjiTwYgK5vwj?p=preview

  setTimeout(() => {
    const classElement = document.getElementsByClassName("myclass");
    if(classElement.length > 0){
      classElement[0].scrollIntoView({ block: 'start',  behavior: 'smooth'});
    }
  }, 100);
4
yavg 19 अगस्त 2019, 08:14

1 उत्तर

सबसे बढ़िया उत्तर

इसके बजाय window.scrollTo() का इस्तेमाल करें element.scrollIntoView()

स्क्रॉल टू विधि बहुरूपी है। पैराम के अलावा आप पहले से ही जानते हैं, इसके बजाय यह केवल एक ऑब्जेक्ट (शब्दकोश) लेता है जिसमें आप स्क्रॉल व्यवहार निर्दिष्ट कर सकते हैं, जैसे:

<script>
 function scrollToJustAbove(element, margin=20) {
   let dims = element.getBoundingClientRect();
   window.scrollTo({
    top: dims.top - margin,
    behavior: 'smooth'
   });
 }

 setTimeout(() => {
   const classElement = document.getElementsByClassName("myclass");
   if(classElement.length > 0){
     scrollToJustAbove(classElement[0]);
   }
 }, 100);
</script>

कार्य उदाहरण: https://plnkr.co/edit/UevhAN4NmTCdw65dzuPe? पी=पूर्वावलोकन

2
UtkarshPramodGupta 12 अक्टूबर 2019, 10:28