滚动到元素上点击在4角

问题描述 投票:55回答:10

我希望能够在按下一个按钮,滚动到一个目标。我想是这样的。

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

在我component.ts的方法一样。

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

我知道,上面的代码是无效的,但只是为了显示我在想什么。我刚开始学角度4,具有角没有以往的经验。我一直在四处寻找这样的事情,但所有的例子都是在AngularJs其中很多不同,以4角

javascript html angular typescript
10个回答
105
投票

你可以做这样的:

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

然后在您的组件:

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

编辑:我看到的评论指出,这不再因元素是不确定的作品。我在角7创建StackBlitz example,它仍然有效。可有人请提供一个例子,其中它不工作?


-7
投票

我刚才用了jQuery找出元素(如的document.getElementById(...)),并使用.focus()调用来完成类似的东西,你在问什么。


-15
投票

您可以通过使用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>

Here是stackblitz样品。


30
投票

这里是我是如何做到的采用了棱角分明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();
}

27
投票

其实还有就是要做到这一点,而无需使用setTimeoutrequestAnimationFrame或jQuery的一个纯JavaScript的方式。

总之,找到您要滚动到滚动视图元素,并使用scrollIntoView

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

这里是一个plunkr


17
投票

乔恩有正确的答案,这部作品在我的角度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>

16
投票

有点晚了这个晚会,但是我已经写了角4+,不只是这一个插件。它涵盖了你可能会碰到其他问题,比如服务器端呈现。您也可以到动画滚动到你的喜好。充分披露,我是作者。

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

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

希望这可以帮助你!


12
投票

在角7个作品完美

HTML

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

在组件

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

5
投票

在角可以使用ViewChild和ElementRef:给你的HTML元素参考

<div #myDiv > 

和你的组件中:

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

您可以使用this.myDivRef.nativeElement去你的元素


4
投票

另一种方式来做到这一点的角度:

标记:

<textarea #inputMessage></textarea>

加入ViewChild()属性:

@ViewChild('inputMessage')
inputMessageRef: ElementRef;

滚动任何你想用scrollIntoView()函数组件的内部:

this.inputMessageRef.nativeElement.scrollIntoView();

2
投票

您可以通过使用下面的代码块滚动到你的视图的任何元素参考。注意目标(elementref ID)可以是任何有效的HTML标记。

在视图(HTML文件)

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

,在.ts文件,

scroll() {
   document.querySelector('#target').scrollIntoView({ behavior: 'smooth', block: 'center' });
}
© www.soinside.com 2019 - 2024. All rights reserved.