Angular 4'te tıklandığında öğeye kaydır

Bir düğmeye basıldığında bir hedefe kaydırabilmek istiyorum. Bunun gibi bir şey düşünüyordum.

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

Ve benim component.tsgibi bir yöntemimde.

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

Yukarıdaki kodun geçerli olmadığını biliyorum, sadece ne düşündüğümü göstermek için. Daha önce Angular deneyimi olmadan Angular 4'ü öğrenmeye başladım. Etrafta bunun gibi bir şey arıyordum ama tüm örnekler Angular 4'ten çok farklı olan AngularJs'de.

Bunu şu şekilde yapabilirsin:

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

ve sonra bileşeninizde:

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

Düzenleme: Tanımlanmamış öğe nedeniyle bunun artık çalışmadığını belirten yorumlar görüyorum. Angular 7'de bir StackBlitz örneği oluşturdum ve hala çalışıyor. Birisi lütfen işe yaramadığı bir örnek verebilir mi?

İşte Angular 4 kullanarak bunu nasıl yaptım.

Şablon

<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>

bu işlevi Bileşene ekleyin.

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

Bunu setTimeoutveya requestAnimationFrameveya jQuery kullanmadan gerçekleştirmenin aslında saf bir javascript yolu var .

Kısacası, kaydırmak istediğiniz öğeyi scrollView'da bulun ve kullanın scrollIntoView.

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

İşte bir plunkr .

Angular 7'de mükemmel çalışıyor

HTML

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

Bileşende

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

Jon'un doğru cevabı var ve bu açısal 5 ve 6 projelerimde işe yarıyor.

Gezinme çubuğundan altbilgiye sorunsuzca kaydırmak için tıklamak istersem:

<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' });
}

Altbilgiden başlığa geri dönmek istediğim için, bu işlevin bulunduğu bir hizmet oluşturdum ve onu navbar ve altbilgi bileşenlerine enjekte ettim ve gerektiğinde 'üstbilgi' veya 'altbilgi' olarak ilettim. Bileşen bildirimlerine kullanılan sınıf adlarını vermeyi unutmayın:

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

Angular'da yapmanın başka bir yolu:

İşaretleme:

<textarea #inputMessage></textarea>

ViewChild()Mülk ekle :

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

scrollIntoView()Fonksiyonu kullanarak bileşenin içinde istediğiniz herhangi bir yere gidin :

this.inputMessageRef.nativeElement.scrollIntoView();

Aşağıdaki kod bloğunu kullanarak görünümünüzdeki herhangi bir öğe referansına gidebilirsiniz. Hedefin (elementref kimliği ) herhangi bir geçerli html etiketinde olabileceğini unutmayın.

Görünümde (html dosyası)

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

  

üzerine .tsdosya

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

Bunu, aşağıdaki gibi bir açısal DOM öğesine başvurarak elde edebilirsiniz:

İşte stackblitz'deki örnek

bileşen şablonu:

<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>

Angular'da kullanabilir ViewChildve ElementRef: HTML öğenize bir ref verebilirsiniz

<div #myDiv > 

ve bileşeninizin içinde:

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

this.myDivRef.nativeElementelementine ulaşmak için kullanabilirsin

Bu numarayı yapmam gerekiyor, belki de özel bir HTML öğesi kullandığım içindir. Bunu yapmazsam, targetiçinde sahip onItemAmounterClickolmayacakscrollIntoView yöntemi

.html

<div *ngFor"...">
      <my-component #target (click)="clicked(target)"></my-component>
</div>

.ts

onItemAmounterClick(target){
  target.__ngContext__[0].scrollIntoView({behavior: 'smooth'});
}

Sadece jQuery'yi kullanarak öğeyi (örneğin document.getElementById(...)) bulup .focus()aramayı kullanarak istediğiniz gibi bir şey yaptım .

Bunu jquery kullanarak yapabilirsiniz:

ts kodu:

    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 Kodu :

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

Bunu kaydırmak istediğiniz öğelere uygulayın:

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

İşte bir stackblitz örneği.