Как рассчитать смещение прокрутки для горизонтальной прокрутки при перемещении мыши? - PullRequest
Новая
       21

Как рассчитать смещение прокрутки для горизонтальной прокрутки при перемещении мыши?

0 голосов
/ 01 декабря 2018

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

Пример: 

const navbar = document.getElementById('navbar-list');

document.addEventListener('mousemove', e => {
    let x = e.clientX || e.pageX;

    navbar.style.setProperty('--pos-x', (-x/1.35) + 'px');
});
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.flex-container, .menu, ul, li, a {
  height: 100%;
}

.flex-container, .menu {
  width: 100%;
  height: 100%;
}

.menu {
  overflow: hidden;
  position: relative;
}

.menu ul {
  position: absolute;
  left: var(--pos-x);
  list-style: none;
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  width: 100%;
}

 .menu ul > li {
  padding: 0px;
  margin: 0px;
  margin-left: -4px;
  text-align: center;
  display: inline-block;
  width: 25%;
}

.menu ul > li > a {
  display: inline-block;
  margin: 0px;
  width: 100%;
  text-decoration: none;
  color: #000;
  font-size: 18pt;
  background: rgba(0, 0, 0, 0.0);
  -webkit-transition: background-color 0.4s; /* Safari */
    transition: background-color 0.4s;
}

.menu ul > li > a > .bottom-info {
  position: absolute;
  bottom: -30px;
  text-align: center;
  display: block;
  width: 25%;
  -webkit-transition: bottom 0.3s; /* Safari */
    transition: bottom 0.3s;
}

.menu ul > li > a:hover .bottom-info {
  bottom: 40px;
}

.menu ul > li > a:hover {
  background: rgba(0, 0, 0, 0.6);
  color: #FFF;
}
<!-- Menu -->
<div class="menu" id="menu">
  <ul class="flex-container" id="navbar-list">
    <li>
      <a href="#">
        <span class="title">First Item</span>
        <div class="bottom-info">The first</div>
      </a>
    </li>
    <li><a href="#">
        <span class="title">Second Item</span>
        <div class="bottom-info">The second</div>
      </a></li>
    <li><a href="#">
        <span class="title">Third Item</span>
        <div class="bottom-info">The Third</div>
      </a></li>
    <li><a href="#">
        <span class="title">Fourth Item</span>
        <div class="bottom-info">The fouth</div>
      </a></li>
    <li><a href="#">
        <span class="title">Fifth Item</span>
        <div class="bottom-info">The fifth</div>
      </a></li>
    <li><a href="#">
        <span class="title">Sixth Item</span>
        <div class="bottom-info">The sixth</div>
      </a></li>
    <li><a href="#">
        <span class="title">Seventh Item</span>
        <div class="bottom-info">The final item</div>
      </a></li>
  </ul>
</div>

Проблема в части Javascript.В настоящее время это работает только с 7 пунктами, и если я установлю --pos-x var равным -x/1.35.Если количество элементов изменяется, сценарий либо не прокручивает весь путь до последнего элемента (если более 7 элементов), либо слишком далеко прокручивает последний элемент (менее 7 элементов). 

const navbar = document.getElementById('navbar-list');

document.addEventListener('mousemove', e => {
    let x = e.clientX || e.pageX;

    // Here is where the problem lies (I should I calculate the 1.35 value?)
    navbar.style.setProperty('--pos-x', (-x/1.35) + 'px');

    console.log(navbar.offsetWidth);
});

Это может быть просто математическая проблема, я просто не могу понять это для моей жизни.

1 Ответ

0 голосов
/ 01 декабря 2018

Это соотношение между шириной вашего экрана и количеством пикселей, которые ваш контейнер может прокручивать.Например, если ширина вашего экрана составляет 1000 пикселей, то пространство, занимаемое всеми вашими семью элементами, будет 1750 пикселей (7 * 250 пикселей).Это означает, что ваш контейнер может перемещаться (прокручиваться) на 750 пикселей.

Полученное вами значение равно 1000 пикселей / 750 пикселей = ~ 1,33.Когда у вас есть, например, 8 предметов, ваш контейнер будет принимать 2000 пикселей (8 (250 пикселей), что означает, что он сможет прокручивать только 1000 пикселей. Соотношение будет 1000 пикселей / 1000 пикселей, что будет 1.

====

Что вам нужно сделать сейчас:

  1. Определить ширину контейнера, в котором находятся все ваши элементы.
  2. Рассчитать максимальное расстояниекоторый может прокрутить ваш контейнер (maxScrollDistance = containerWidth - screenWidth).
  3. Рассчитать соотношение (screenWidth / maxScrollDistance)

PS. Имейте в виду, что ваше решение не будет работать на мобильных устройствах..

...