Question

我引用了此链接（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);
}

Answer 1

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

Answer 2

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

所以你可以尝试我用的东西；

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

单击按钮以角度6向下（向上）滚动div？

2 个答案: