Прокрутите элемент до щелчка в Angular 4

Ответ 1

Вы можете сделать это так:

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

а затем в вашем компоненте:

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

Изменить: я вижу комментарии о том, что это больше не работает из-за неопределенного элемента. Я создал пример StackBlitz в Angular 7, и он все еще работает. Может кто-нибудь привести пример, где это не работает?

Ответ 2

вот как я это сделал с помощью угловых 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();
}

Ответ 3

На самом деле существует чистый способ JavaScript для этого без использования setTimeout или requestAnimationFrame или jQuery.

Вкратце, найдите элемент в scrollView, к которому вы хотите перейти, и используйте scrollIntoView.

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

Вот такой вот плункр.

Ответ 4

У Джона правильный ответ, и это работает в моих 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' });
}

Поскольку я хотел прокрутить назад до верхнего колонтитула нижний колонтитул, я создал сервис, в котором находится эта функция, и внедрил его в компоненты navbar и нижнего колонтитула и передал в "верхний колонтитул" или "нижний колонтитул", где это необходимо. просто не забудьте дать объявлениям компонентов используемые имена классов:

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

Ответ 5

Немного поздно для этой вечеринки, но я написал плагин для Angular 4+, который делает именно это. Он охватывает другие проблемы, с которыми вы можете столкнуться, например, на стороне сервера. Вы можете также оживить прокрутку по своему вкусу. Полное раскрытие, я автор.

NPM: @nicky-lenaers/ngx-scroll-to

GitHub: @nicky-lenaers/ngx-scroll-to

Надеюсь, это поможет вам!

Ответ 6

В угловых 7 работает отлично

HTML

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

В компоненте

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

Ответ 7

в угловых вы можете использовать ViewChild и ElementRef: дать вашему элементу HTML ссылку

<div #myDiv > 

и внутри вашего компонента:

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

Вы можете использовать this.myDivRef.nativeElement, чтобы добраться до вашего элемента

Ответ 8

Еще один способ сделать это в Angular:

Разметка:

<textarea #inputMessage></textarea>

Добавьте свойство ViewChild():

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

Прокрутите в любом месте внутри компонента с помощью функции scrollIntoView():

this.inputMessageRef.nativeElement.scrollIntoView();

Ответ 9

Вы можете перейти к любому элементу ref по вашему мнению, используя блок кода ниже. Обратите внимание, что цель (ID элемента) может быть в любом допустимом HTML-теге.

В представлении (HTML файл)

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

в файле .ts,

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

Ответ 10

Вы можете добиться этого, используя ссылку на angular элемент 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>

Ответ 11

Я сделал что-то вроде того, что вы просите, просто используя jQuery для поиска элемента (например, document.getElementById(...)) и используя вызов .focus().

Ответ 12

Вы можете сделать это с помощью 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>

Вот образец стекаблица.