Есть ли способ сделать бесконечную / l oop горизонтальную прокрутку CSS? - PullRequest
Новая
       6

Есть ли способ сделать бесконечную / l oop горизонтальную прокрутку CSS?

1 голос
/ 22 марта 2020

Есть ли способ создать горизонтальную прокрутку с циклом, используя CSS?

Поэтому, когда пользователь прокручивает и достигает конца, он непрерывно возвращает начало, как его бесконечный / l oop или wheel.

Есть ли способ сделать это легко, используя CSS и HTML? 

<style type="text/css">.auto-style1 {
  border-width: 0px;
}

.pagewrap {
  background-color: silver;
  width: 150px;
  margin: 0 auto;
}

.scroll {
  overflow-x: scroll;
}

.auto-style2 {
  border: 1px black solid;
}

</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="en-gb" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

</head>

<body>

  <div class="pagewrap">
    <div class="scroll">

      <table class="auto-style1" style="width: 90%;">
        <tr>
          <td class="auto-style2">1</td>
          <td class="auto-style2">2</td>
          <td class="auto-style2">3</td>
        </tr>
        <tr>
          <td class="auto-style2">123456</td>
          <td class="auto-style2">123456</td>
          <td class="auto-style2">123456789</td>
        </tr>
      </table>

    </div>
  </div>

</body>

</html>

Ответы [ 2 ]

1 голос
/ 22 марта 2020

К сожалению, вы не можете сделать это просто с помощью CSS.

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

Я добавил к вашему фрагменту код JS, который дублирует вашу таблицу и использует API-интерфейс Intersection Observer , чтобы определить, когда исходная таблица больше не видна, и прокрутить его влево . 

const scroll = document.querySelector('.scroll');

const table1 = scroll.querySelector('table');

// Create a copy of the table and adds it to the scrollable element
const table2 = table1.cloneNode(true)
scroll.appendChild(table2);

const options = {
  root: scroll,
  rootMargin: '0px',
  threshold: 0
}

const callback = (entries) => {
  if (!entries[0].isIntersecting) {
    // table1 is out of bounds, we can scroll back to it
    scroll.scrollLeft = 0;
  }
}

const observer = new IntersectionObserver(callback, options);
observer.observe(table1);
<style type="text/css">.auto-style1 {
  border-width: 0px;
}

.pagewrap {
  background-color: silver;
  width: 150px;
  margin: 0 auto;
}

.scroll {
  overflow-x: scroll;
  display: flex;
}

.auto-style2 {
  border: 1px black solid;
}

</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="en-gb" http-equiv="Content-Language" />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

</head>

<body>

  <div class="pagewrap">
    <div class="scroll">

      <table class="auto-style1" style="width: 90%;">
        <tr>
          <td class="auto-style2">1</td>
          <td class="auto-style2">2</td>
          <td class="auto-style2">3</td>
        </tr>
        <tr>
          <td class="auto-style2">123456</td>
          <td class="auto-style2">123456</td>
          <td class="auto-style2">123456789</td>
        </tr>
      </table>

    </div>
  </div>

</body>

</html>
0 голосов
/ 22 марта 2020

С css (и javascript) вам нужно будет клонировать элемент, чтобы он выглядел как прокрутка навсегда.

Ваш ответ стоит здесь: Есть ли способ сделать бесконечную / l oop горизонтальную прокрутку CSS? .

здесь CSS пример для демонстрации идеи (с использованием тени), а не полоса прокрутки, а событие при наведении:

Конечно, для удовольствия вам понадобится javascript. 

* {
  margin: 0;
  box-sizing: border-box;
}

div {
  display: flex;
  width: max-content;
  margin: auto;
  overflow: hidden;
}

b {
  background: white;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

b+b {
  order: 2;
}

table,
td {
  border: solid;
}

table {
  box-shadow: 150px 0;
  animation: slide 2s infinite linear paused;
  font-family: "Times New Roman";
  font-size: 18px;
}

td {
  box-shadow: 150px 0 0 -2px white, 150px 0 0, 150px 0 0 2px white;
  text-shadow: 150px 0;
  padding:2px;
}

b:hover~table {
  animation-play-state: running;
}

b+b:hover~table {
  animation-direction: reverse;
}

@keyframes slide {
  to {
    transform: translatex(-100%)
  }
}
<div>
  <b><</b>
  <b>></b>
  <table>
    <tr>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
      <td>td</td>
    </tr>
  </table>
</div>

это можно сделать это не это должно быть сделано;)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...