मैं गतिशील रूप से बनाए गए विशिष्ट आईडी तत्व पर स्क्रॉल करने के लिए vueToScroll लाइब्रेरी का उपयोग कर रहा हूं।

  <button  ref="replyBtn"
                         v-scroll-to="{
                     el: '#goToReply101',
                     duration: 800,
                     easing: 'easing',
                     offset: -50,
                     force: true
                 }" :id="this.goToReply">Scroll to the div

                </button>

नीचे दी गई स्क्रिप्ट उम्मीद के मुताबिक काम करती है, लेकिन अगर मैं तत्व के मान को गतिशील रूप से पास करता हूं तो काम नहीं करता है:

  <button  ref="replyBtn"
                     v-scroll-to="{
                 el: this.replyScroll//it returns '#gotToReply101'
                 duration: 800,
                 easing: 'easing',
                 offset: -50,
                 force: true
             }" :id="this.goToReply">Scroll to the div

            </button>

this.replyScroll वैरिएबल का मान क्लिक किए गए आईडी के मान के अनुसार बदलता है।

2
sodskat 18 जून 2020, 21:43

1 उत्तर

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

"गतिशील" आईडी वाला मेरा डेटा:

data() {
    return {
      element: '#element'
    }
  }

मुझे लगता है कि आपकी समस्या उस तत्व की डायनेमिक आईडी में है, जिस पर आप स्क्रॉल करने का प्रयास कर रहे हैं।

तो दूसरा उदाहरण देखें:

<div class="test">
    <button id="button_el" v-scroll-to="{
                 el: element,
                 duration: 800,
                 easing: 'easing',
                 offset: -50,
                 force: true
             }">Scroll to #element</button>
    <div style="height: 200vh"></div>
    <div :id="element.substring(1)">
      Hi. I'm #element.
    </div>
  </div>

आप देख सकते हैं कि मैंने element डेटा प्रॉपर्टी से पहला वर्ण हटा दिया है। यदि आपका डायनामिक डेटा #element जैसा है, तो यदि आप उस डेटा को डायनेमिक आईडी के रूप में उपयोग करना चाहते हैं, तो आपको # घटाना होगा।

लाइन element.substring(1) ठीक यही करती है।

1
Jakub A Suplicki 24 जून 2020, 01:35