小编ali*_*000的帖子

谷歌浏览器:同时具有更多元素的"流畅"scrollIntoView()不起作用

在Google Chrome中,如果同时滚动更多容器,则行为"平滑"的element.scrollIntoView()不起作用.如果使用顺序触发触发下一个容器,则第一个容器会停止滚动.

在Firefox中一切正常.

我的解决方法是使用"即时"行为,但我喜欢使用"流畅"行为来获得更好的用户体验.

是一个使用Angular的plunker

HTML

<p>
  In Google Chrome element.scrollIntoView() with behavior 'smooth' doesn't work, if scrolling more containers at the same time.
  Shwon in case 'All Smooth (200ms sequence)' the container stopps scrolling.
  <br>
  <br> In Firefox all works.
</p>

<div class="row mb-1">
  <div class="col">
    <button (click)="reset()" type="button" class="btn btn-secondary">Reset</button>
  </div>
</div>

<div class="row mb-1">
  <div class="col">
    <button (click)="scrollAllInstant()" type="button" class="btn btn-secondary">All Instant</button>
    <small class="text-success">Works</small>
  </div>
</div>

<div class="row mb-1">
  <div class="col">
    <button (click)="scrollAllSmooth()" type="button" …
Run Code Online (Sandbox Code Playgroud)

javascript google-chrome js-scrollintoview

7
推荐指数
1
解决办法
381
查看次数