单击按钮以 6 角向下滚动 div（从上到下）？答案

【问题标题】：Click on button scroll div down(upto bottom) in angular 6?单击按钮以 6 角向下滚动 div（从上到下）？
【发布时间】：2018-10-11 16:44:17
【问题描述】：

我参考了这个链接（NPM：@nicky-lenaers/ngx-scroll-to）和很多答案，但我没有得到完美的解决方案。当我点击按钮时，我的 div 页面（div 高度不固定，它可能非常）它只是向下滚动一点，但我想让页面在角度 6 中向下滚动到底部。任何其他解决方案或修改都适用。谢谢

chat.component.html

<div id="destination"> My Content is here</div>
<button (click)="getChatMessages()">SAVE</button>

chat.component.ts

import { ScrollToService, ScrollToConfigOptions } from '@nicky-lenaers/ngx-scroll-to';

constructor(private _scrollToService: ScrollToService) { }

getChatMessages(){
  const config: ScrollToConfigOptions = {
    target: 'destination'
  };
  this._scrollToService.scrollTo(config);
}

【问题讨论】：

标签： angular scroll

【解决方案1】：

对此进行了很多尝试。在我的情况下没有任何图书馆帮助。

所以你可以试试我用的；

_onButtonClick (e) {

        this._pageY = e.pageY;

        if (true) {
          //scroll while drag
          const y = this._pageY;
          const container =  <HTMLElement>document.querySelector('.yourcontainerclass');
          const containerBottom =  container.offsetTop + container.offsetHeight;
          const containerTop =  container.offsetTop;
          if (containerBottom - y < 120) { // To leave a space and scroll down
            container.scrollTop += containerBottom - 30;
          } else if (containerTop + y < 250) { // you do not need this but if you have a button on top,you may want to scroll up

            container.scrollTop -= containerTop + 30;
          }
        }
      }

将此添加到您的按钮上，例如onclick = _onButtonClick($event)

【讨论】：

你可以在这里找到定义w3schools.com/jsref/prop_element_offsettop.asp。如果它给出错误，请检查您的 htmlelement 是否从 dom 中获取了正确的元素
@user10411207 如果你用一个真正的选择器替换'.yourcontainerclass'，你将摆脱那个offsetTop错误。

【解决方案2】：

<div> My Content is here <div id="destination"></div></div> 在关闭您的 div 之前，最后制作一个小 div。 stackblitz example

【讨论】：

Asanka 这不起作用我在关闭 div 之前制作
你会从父 div 中删除 id="destination" 吗？
是的，我从父 div 中删除它现在滚动一点，但不滚动到底部
好的。你想要的是把这个 - >
放在你想要滚动的页面中。
我已经放了你可以看到的例子。