scrollTo не может прокручивать два элемента по отдельности - PullRequest
Новая
       2

scrollTo не может прокручивать два элемента по отдельности

0 голосов
/ 10 июля 2020

Допустим, у вас есть много элементов, выровненных по горизонтали: 

<div
      id="abc"
      style="display: flex; flex-direction:row; overflow:scroll; height: 100px"
    >
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
       ...
</div>

для автоматической прокрутки вы можете использовать какой-то l oop например: 

self.setInterval(() => {
        if (container.scrollLeft !== scrollWidth) {
          container.scrollTo(container.scrollLeft + 1, 0);
        }

Это отлично работает. Но теперь предположим, что вы хотите прокрутить 2 отдельных div ... 

     for (var i = 0; i < containers.length; i++) {
          const container = document.getElementById(containers[i]);

          const ScrollWidth = container.scrollWidth - container.clientWidth;

          if (i % 2 == 0) {
            console.log("starting w/ offset!");
            container.scrollTo(ScrollWidth - 1, 0);
          }

          var scrollDirection = 1;
          var scrollLeft = ScrollWidth;
          self.setInterval(() => {
            if (scrollDirection == 1 && container.scrollLeft !== ScrollWidth) {
              container.scrollTo(container.scrollLeft + 1, 0);
            } else if (scrollDirection == -1 && container.scrollLeft !== 0) {
              container.scrollTo(container.scrollLeft - 1, 0);
            } else {
              scrollDirection = scrollDirection * -1;
            }
          }, 15);
        }
      });

Ожидаемый результат - один div должен прокручиваться влево, а другой - вправо. Однако это не работает, несмотря на то, что контейнеры разные. Здесь есть ответ , который предлагает прокрутить до элемента, что я делаю: 

container.scrollTo(container.scrollLeft + 1, 0);

Я воспроизвел это в песочнице. Чтобы быстро проверить, раскомментируйте одну из этих 3 строк 

// var containers = ["cba"];

  // var containers = ["abc"];

  // var containers = ["abc","cba"];

Строки 1 и 2 работают, однако 3 не работает. Похоже, scrollTo не может работать с двумя отдельными div одновременно. Это правда? Если да, то какие у меня варианты прокрутки обоих по отдельности?

1 Ответ

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

Ваша проблема не связана с прокруткой, а связана с объемом ваших варов. Вы должны передать их в качестве параметров в вашей интервальной функции, потому что scrollWidth scope-var и контейнер управляются в for l oop, и поэтому вы меняете свои ссылки внутри своей стрелочной функции: 

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <div
      id="abc"
      style="display: flex; flex-direction:row; overflow:scroll; height: 100px"
    >
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
      <h1>Hello Vanilla!</h1>
    </div>
    <div
      id="cba"
      style="display: flex; flex-direction:row; overflow:scroll; height: 100px"
    >
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
      <h1>Turtles R Cool!</h1>
    </div>
    <script>
      //var containers = ["cba"];
      //var containers = ["abc"];
      var containers = ["abc", "cba"];
      var scrollDirections = [1, 1];

      window.addEventListener("load", () => {
        for (var i = 0; i < containers.length; i++) {
          const container = document.getElementById(containers[i]);

          const ScrollWidth = container.scrollWidth - container.clientWidth;

          if (i % 2 == 0) {
            console.log("starting w/ offset!");
            container.scrollTo(ScrollWidth - 1, 0);
          }

          self.setInterval(
            (cont, width, offset) => {
              if (scrollDirections[offset] == 1 && cont.scrollLeft !== width) {
                console.log(
                  "Scrolling to the right = " +
                    cont.scrollLeft +
                    " width = " +
                    width
                );
                cont.scrollTo(cont.scrollLeft + 1, 0);
              } else if (
                scrollDirections[offset] == -1 &&
                cont.scrollLeft !== 0
              ) {
                console.log(
                  "Scrolling to the left = " +
                    cont.scrollLeft +
                    " width = " +
                    width
                );
                cont.scrollTo(cont.scrollLeft - 1, 0);
              } else {
                console.log(
                  "Flipping direction left = " +
                    cont.scrollLeft +
                    " width = " +
                    width
                );
                scrollDirections[offset] = scrollDirections[offset] * -1;
              }
            },
            15,
            container,
            ScrollWidth,
            i
          );
        }
      });
    </script>
  </body>
</html>
...