एंगुलर 4 में क्लिक करने पर एलिमेंट पर स्क्रॉल करें

Question

जब बटन दबाया जाता है तो मैं एक लक्ष्य तक स्क्रॉल करने में सक्षम होना चाहता हूं। मैं ऐसा ही कुछ सोच रहा था।

<button (click)="scroll(#target)">Button</button>

और मेरी component.tsतरह एक विधि में।

scroll(element) {
    window.scrollTo(element.yPosition)
}

मुझे पता है कि ऊपर दिया गया कोड मान्य नहीं है, लेकिन यह दिखाने के लिए कि मैं क्या सोच रहा था। मैंने सिर्फ कोणीय 4 को सीखना शुरू किया है, जिसमें कोणीय का कोई पिछला अनुभव नहीं है। मैं चारों ओर कुछ इस तरह की खोज कर रहा था, लेकिन सभी उदाहरण AngularJs में हैं जो Alot 4 के लिए अलग हैं

Comments

आपके सिंटैक्स में समस्याएं नहीं हैं लेकिन आपको यह परिभाषित करने की आवश्यकता है कि #target क्या है।

— १

तो यह काम करना चाहिए? जब मैं एक मनमाना संख्या का उपयोग करता हूं और अपने फ़ंक्शन में window.scrollTo (500) कॉल करता हूं तो कुछ भी नहीं होता है। मैं सोच रहा था कि तत्व एक HTMLElement होगा

ठीक है, हालांकि, #target क्या है, कोणीय इसका समाधान नहीं करेगा? आप पहले कोई पैरामीटर के साथ स्क्रॉल () का परीक्षण कर सकते हैं।

— वनाड्रेस

हाँ मैंने कोशिश की (क्लिक करें) = "स्क्रॉल ()" मेरे बटन में और window.scrollTo (0, 500) घटक में लेकिन कुछ नहीं होता है

लेकिन जब मैं निर्माण कार्य में window.scrollTo (0, 500) करता हूं तो 500ms देरी से यह काम करता है

Answer 1

आप इसे इस तरह से कर सकते हैं:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

और फिर अपने घटक में:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

संपादित करें: मुझे यह बताते हुए टिप्पणियां मिलीं कि यह तत्व अपरिभाषित होने के कारण काम नहीं करता है। मैंने Angular 7 में एक StackBlitz उदाहरण बनाया और यह अभी भी काम करता है। क्या कोई कृपया एक उदाहरण प्रदान कर सकता है जहां यह काम नहीं करता है?

Comments

किसी कारण से यह सटीक कोड मेरे लिए कुछ भी नहीं चला रहा है। यहां तक ​​कि एक हार्डकोड window.scrollTo (0, 500) कुछ भी नहीं करता है

@ N15M0_jk हां, एक ऐसी वस्तु भी है जिसे आप अन्य विकल्पों के साथ पास कर सकते हैं, जो आपके लिए आवश्यक है। developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

— फ्रैंक मॉडिका

@ एंथनी यह आपको उस तत्व को संदर्भित करने की अनुमति देता है जिसे आप scrollघटक पर फ़ंक्शन को पास करना चाहते हैं। ध्यान दें कि क्लिक ईवेंट कॉल करता है scroll(target)। यदि आप घटक को अंदर से तत्व में प्रवेश करना चाहते हैं, तो तत्व को पास किए बिना आप उपयोग कर सकते हैं @ViewChild।

— फ्रैंक मोडिका

यह अब मेरे साथ ठीक काम करता है। लेकिन इससे पहले कि मैं एक मूर्खतापूर्ण गलती करता था और id="target"इसके बजाय इस्तेमाल करता था #targetऔर इसने मुझे "अल अपरिभाषित त्रुटि" दिया!

— यष्टाचक

मेरा मानना ​​है कि अपरिभाषित त्रुटि तब होती है जब तत्व #targetएक के अंदर होता है *ngIf, लेकिन यह काम करना चाहिए यदि आप @ViewChild@abbastec से लिंक में विधि का उपयोग करते हैं

— शानदार

Answer 2

वहाँ वास्तव में एक शुद्ध जावास्क्रिप्ट तरीका का उपयोग किए बिना यह पूरा करने के लिए है setTimeoutया requestAnimationFrameया jQuery।

संक्षेप में, स्क्रॉल करें में वह तत्व ढूंढें जिसे आप स्क्रॉल करना चाहते हैं, और उपयोग करना चाहते हैं scrollIntoView।

el.scrollIntoView({behavior:"smooth"});

यहाँ एक प्लंकर है ।

Comments

2 तरीके जो इस उत्तर को अलग करते हैं: 1. यह एनिमेटेड सुगम स्क्रॉलिंग है, न कि जंप। 2. यह उत्तर एक विंडो को स्क्रॉल नहीं करता है, लेकिन एक विंडो के भीतर स्क्रॉलव्यू ले जाता है। उदाहरण के लिए, यदि आपके पास विंडो के भीतर एक क्षैतिज स्क्रॉलव्यू है। उदाहरण के लिए प्लंकर की जाँच करें।

— जॉन

ScrollIntoView का ScrollIntoViewOptions (तर्क के रूप में ऑब्जेक्ट) अभी फ़ायरफ़ॉक्स के साथ संगत है।

— जीसस Fuentes

क्रोम और फ़ायरफ़ॉक्स के लिए ठीक काम करता है, लेकिन सफारी के लिए नहीं।

— यमशिरो रियान

Answer 3

यहाँ है कि मैंने इसे एंगुलर 4 का उपयोग कैसे किया।

खाका

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

इस फ़ंक्शन को घटक में जोड़ें।

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

Comments

आपने अपने टेम्पलेट में elementRefs या HTML id सेट नहीं किए हैं। वास्तव में 'cat -' + cat.category_id तत्व कहाँ है जिसे आप स्क्रॉल कर रहे हैं?

— कीगन

यह एक बेहतर जवाब है। आप स्क्रॉल को किसी अन्य घटक पर रख सकते हैं।

— डेल गुयेन

यह स्वीकृत उत्तर होना चाहिए। कोणीय 9. के लिए काम करना

— सोलह

Answer 4

कोणीय 7 में सही काम करता है

एचटीएमएल

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

घटक में

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

Comments

{व्यवहार के लिए बोनस: 'चिकनी'}

— स्क्वापल रेसिपीज

यह मेरे लिए काम कर रहा है .. {व्यवहार के लिए विशेष धन्यवाद: 'चिकनी'}

— विभु कुमार

#targetबटन के बाद परिभाषित होने पर यह काम नहीं करेगा , जो प्रासंगिक है यदि आपके पास उदाहरण के लिए एक अस्थायी शीर्षक है ...

— जोनाथन

Answer 5

जॉन के पास सही उत्तर है और यह मेरे कोणीय 5 और 6 परियोजनाओं में काम करता है।

अगर मैं नवाब से लेकर पाद तक आसानी से स्क्रॉल करना चाहता था:

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

क्योंकि मैं पाद लेख से हेडर पर वापस स्क्रॉल करना चाहता था, इसलिए मैंने एक सेवा बनाई जो इस फ़ंक्शन में स्थित है और इसे नेवबार और पाद लेख घटकों में इंजेक्ट किया गया है और जहां आवश्यकता होती है 'हेडर' या 'पाद' में पारित किया जाता है। बस वास्तव में इस्तेमाल किए गए वर्ग के नाम के घटक घोषणाओं को याद रखें:

<app-footer class="footer"></app-footer>

Answer 6

इसे कोणीय में करने का एक और तरीका:

मार्कअप:

<textarea #inputMessage></textarea>

ViewChild()संपत्ति जोड़ें :

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

scrollIntoView()फ़ंक्शन का उपयोग करके घटक के अंदर कहीं भी स्क्रॉल करें :

this.inputMessageRef.nativeElement.scrollIntoView();

Answer 7

आप नीचे दिए गए कोड ब्लॉक का उपयोग करके किसी भी तत्व को अपने दृश्य पर स्क्रॉल कर सकते हैं। ध्यान दें कि लक्ष्य (एलिमेंट आईडी ) किसी भी मान्य HTML टैग पर हो सकता है।

दृश्य पर (html फ़ाइल)

<div id="target"> </div>
<button (click)="scroll()">Button</button>
 

  

पर .tsफ़ाइल,

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

Answer 8

आप एक कोणीय DOM तत्व के संदर्भ का उपयोग करके इसे प्राप्त कर सकते हैं:

स्टैकब्लिट्ज़ में इसका उदाहरण है

घटक टेम्पलेट:

<div class="other-content">
      Other content
      <button (click)="element.scrollIntoView({ behavior: 'smooth', block: 'center' })">
        Click to scroll
      </button>
    </div>
    <div id="content" #element>
      Some text to scroll
</div>

Answer 9

कोणीय में आप उपयोग कर सकते हैं ViewChildऔर ElementRef: अपने HTML तत्व को एक रेफरी दें

<div #myDiv > 

और आपके घटक के अंदर:

import { ViewChild, ElementRef } from '@angular/core';
@ViewChild('myDiv') myDivRef: ElementRef;

आप this.myDivRef.nativeElementअपने तत्व को प्राप्त करने के लिए उपयोग कर सकते हैं

Comments

यह एक अच्छा समाधान है लेकिन समस्या यह है कि यह केवल तब काम करता है जब मैं टैब को फिर से लोड करता हूं लेकिन राउटरलिंक के साथ नहीं। इस समस्या के लिए कोई समाधान दोस्तों?

— अहसान

Answer 10

मैंने कुछ ऐसा किया है जैसे आप तत्व को खोजने के लिए jQuery का उपयोग करके पूछ रहे हैं (जैसे कि document.getElementById(...)) और .focus()कॉल का उपयोग कर रहे हैं।

Comments

कोणीय का उपयोग करते समय क्या वास्तव में jQuery की आवश्यकता है? कोणीय की तरह लग रहा है पर्याप्त होना चाहिए

100% निश्चित नहीं है, लेकिन मैं एक ऐसे वातावरण में था जिसे मान्य नहीं किया गया है और Angular2 के लिए रिफ्लेक्ट किया गया है, इसलिए मैंने कोणीय में एक समाधान के लिए बहुत कठिन खोज नहीं की और बस कुछ ऐसा कर गया जिसे मैं जानता था कि मेरी पहुंच होगी।

— केनेथ सालोमन

आपको

— Stefdelec

हां हां, मैंने बहुत कुछ सीखा है और हर कोई टिप्पणी करता है कि मुझे jQuery का उपयोग नहीं करना चाहिए। आप ऐसा कुछ नहीं कह रहे हैं जो दूसरों ने आपके ठीक ऊपर टिप्पणी नहीं की है।

— केनेथ सालोमन

विनम्रता के लिए आपको उकसाया। मैं जोड़ना चाहूंगा कि jQuery के जवाब में उन लोगों के लिए कुछ मूल्य हैं जो एसपीए फ्रेमवर्क में बदल रहे हैं। यह दिखाते हुए कि हम इसे कैसे करते थे, और टिप्पणियों को देखकर अन्य समाधानों की सिफारिश की।

— B2K

Answer 11

आप jquery का उपयोग करके ऐसा कर सकते हैं:

ts कोड:

    scrollTOElement = (element, offsetParam?, speedParam?) => {
    const toElement = $(element);
    const focusElement = $(element);
    const offset = offsetParam * 1 || 200;
    const speed = speedParam * 1 || 500;
    $('html, body').animate({
      scrollTop: toElement.offset().top + offset
    }, speed);
    if (focusElement) {
      $(focusElement).focus();
    }
  }

HTML कोड :

<button (click)="scrollTOElement('#elementTo',500,3000)">Scroll</button>

उन तत्वों पर इसे लागू करें जिन्हें आप स्क्रॉल करना चाहते हैं:

<div id="elementTo">some content</div>

यहाँ एक स्टैकब्लिट्ज़ नमूना है।

Comments

सिवाय इसके ओप्स टाइपस्क्रिप्ट समाधानों के लिए एक अप्रचलित ढांचे के साथ काम नहीं करने के लिए कह रहा है (नीचे मतदान किया गया)

— राख

यह टाइपस्क्रिप्ट समाधान है।

— gns

आपने मेरी बात को याद किया है, आपका उत्तर jQuery का उपयोग करता है (हो सकता है कि मैं सबसे अक्षम तरीके से जोड़ दूं) बजाय केवल ईएस * का उपयोग करने के। आपके स्थिरांक न तो उनके प्रकार की घोषणा करते हैं और न ही। यह jQuery का उपयोग करके खराब तर्क के साथ सिर्फ एक बुरा उदाहरण है जो कि पूछा नहीं गया था।

— राख