Поля / полосы прокрутки, связанные с помощью ref jumpy в React (особенно на мобильных устройствах) - PullRequest
Новая
       9

Поля / полосы прокрутки, связанные с помощью ref jumpy в React (особенно на мобильных устройствах)

1 голос
/ 14 июля 2020

Я создал компонент React, который отображает несколько карточек продуктов в горизонтальный ряд. Когда эти карточки длиннее экрана, происходит переполнение и в нижней части компонента появляется полоса прокрутки, позволяющая пользователю прокручивать карточки влево и вправо. Я также хочу, чтобы полоса прокрутки была видна над карточками, поэтому я добавил дополнительный div, размер которого берется из div карточек продуктов (через ref) и представляет собой пустой div с полосой прокрутки. Затем я связал это положение прокрутки div с положением прокрутки карточек продуктов и наоборот, чтобы убедиться, что оба они одинаковы. Это работает, но выглядит прерывистым / нервным при прокрутке, особенно на мобильных устройствах.

Я думаю, возможно, это связано с тем, что каждое событие onScroll запускается несколько раз / противоречит друг другу, но не могу понять, как заставить это работать. Любая помощь будет принята с благодарностью!

Визуализируемый компонент: 

<div>
  {checkWidth() ? (
    <div
      className="ui link cards topscroll"
      ref={topScrollRef}
      onScroll={onScroll}
    >
      <div
        style={{
          minWidth: bottomScrollRef.current.scrollWidth,
          overflowX: "scroll",
        }}
      ></div>
    </div>
  ) : (
    ""
  )}
  <div
    ref={bottomScrollRef}
    onScroll={onScroll}
    className="ui link cards bottomscroll"
  >
    {renderList()}
  </div>
</div>

И обработчик события onScroll: 

const onScroll = (el) => {
  if (
    el.target.className === "ui link cards topscroll" &&
    bottomScrollRef.current.scrollLeft !== topScrollRef.current.scrollLeft
  ) {
    bottomScrollRef.current.scrollLeft = topScrollRef.current.scrollLeft;
  } else if (
    el.target.className === "ui link cards bottomscroll" &&
    topScrollRef.current.scrollLeft !== bottomScrollRef.current.scrollLeft
  ) {
    topScrollRef.current.scrollLeft = bottomScrollRef.current.scrollLeft;
  }
};

примечание: renderList () возвращает карточки товаров

...