Google Chrome:同时“平滑" scrollIntoView()和更多元素不起作用 [英] Google Chrome: Simultaneously 'smooth' scrollIntoView() with more elements doesn't work

问题描述

在Google Chrome浏览器中，具有行为:平滑" 的 element.scrollIntoView()不能同时在多个容器上运行.一旦在一个容器上触发了平滑滚动，第二个容器就会停止滚动.在Firefox中，这个问题不存在；两个容器都可以同时滚动.

In Google Chrome, element.scrollIntoView() with behavior: 'smooth' doesn't work on multiple containers at the same time. As soon as smooth scrolling is triggered on one container, the second container stops scrolling. In Firefox, this problem doesn’t exist; both containers can scroll simultaneously.

我的解决方法是使用 behavior:'instant'，但是我想使用 behavior:'smooth'以获得更好的用户体验.

My workaround is using behavior: 'instant', but I like to use behavior: 'smooth' for a better user experience.

此处 是使用Angular的pl弹枪>

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" class="btn btn-secondary">All Smooth (simultaneously)</button>
    <small class="text-danger">Only one container is scrolled</small>
  </div>
</div>

<div class="row mb-1">
  <div class="col">
    <button (click)="scrollAllSmoothSequenced()" type="button" class="btn btn-secondary">All Smooth (200ms sequence)</button>
    <small class="text-danger">Only last container is scrolled to 85 - Others will stop, if next container is triggered</small>
  </div>
</div>

<div class="row">
  <div *ngFor="let container of containers, let index = index" class="col">

    <button (click)="scrollSingelContainer(container)" type="button" class="btn btn-secondary mb-1">Single Container Smooth</button>
    <small class="text-success">Works</small>

    <div class="card bg-light mb-3" style="height: 500px;  max-width: 18rem;">
      <div class="card-header">Container {{ container }}</div>
      <div (scroll)="onScroll(container)" class="card-body" style="overflow-y: scroll;">
        <p *ngFor="let number of content" [attr.id]="container + '_' + number" class="card-text" [class.text-danger]="number == 85">{{ number }}</p>
      </div>

    </div>
  </div>
</div>

打字稿

export class App {
  name: string;

  containers = [0, 1, 2]
  content = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]

  constructor() {
    this.name = `Angular v${VERSION.full}`
  }

  private scroll(container: number, row: number, behavior: string) {
    let element = document.getElementById(container + '_' + row);
    element.scrollIntoView({
      behavior: behavior,
      block: 'start',
      inline: 'nearest'
    });
  }

  reset() {
    this.containers.forEach(container => {
      this.scroll(container, 1, 'instant');
    });
  }

  scrollSingelContainer(container: number) {
    this.scroll(container, 85, 'smooth');
  }

  scrollAllInstant() {
    this.containers.forEach(container => {
      this.scroll(container, 85, 'instant');
    });
  }

  scrollAllSmooth() {
    this.containers.forEach(container => {
      this.scroll(container, 85, 'smooth');
    });
  }

  scrollAllSmoothSequenced() {
    this.containers.forEach(container => {
      setTimeout(() => {
        this.scroll(container, 85, 'smooth');
      }, 200 * container);
    });
  }

  onScroll(container: number) {
    console.log('Scroll event triggerd by container ' + container);
  }
}

推荐答案

此处提出了类似的问题:

A similar question was asked here: scrollIntoView() using smooth function on multiple elements in Chrome, but the answer is not satisfying, as it states, that this isn't a bug but.

但这似乎是一个错误，并且已在Chromium错误列表中报告:

But it seems to be a bug and it is already reported in the Chromium bug list:

• https://bugs.chromium.org/p/chromium/issues/detail?id = 1121151
• https://bugs.chromium.org/p/chromium/issues/detail?id = 1043933
• https://bugs.chromium.org/p/chromium/issues/detail?id = 833617 .

要使用 scrollIntoView (至少对于某些元素)同时平滑滚动多个元素，我们需要等待Chromium团队进行修复.

For smooth scrolling of multiple elements at the same time using scrollIntoView (for at least some of the elements) we need to wait for a fix from the Chromium team.

一种替代方法正在使用 scrollTo 在Chrome中也适用于多个元素.请参见此示例中的方案5: https://jsfiddle.net/2bnspw8e/8/.

缺点是您需要获取要滚动到视图中的元素的下一个可滚动父级(请参见 https://stackoverflow.com/a/49186677 )，计算将父级滚动到该元素并调用 parent.scrollTo({top:计算偏移量，行为:平滑"})所需的偏移量.

The downside is that you need to get the next scrollable parent of the element you want to scroll into view (see https://stackoverflow.com/a/49186677 for an example), calculate to offset which is needed to scroll the parent to the element and call parent.scrollTo({top: calculatedOffset, behavior: 'smooth'}).

这篇关于Google Chrome:同时“平滑" scrollIntoView()和更多元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！