Question

我正在尝试基于鼠标位置创建水平屏幕功能。我已经创建了大多数脚本和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);
});

这可能只是一个数学问题，我无法一生解决这个问题。

Answer 1

这是屏幕宽度与容器可以滚动的像素数之间的比率。例如，如果您的屏幕宽度为1000像素，则所有七个项占用的空间将为1750像素（7 * 250像素）。这意味着您的容器可以移动（滚动）750像素。

您获得的值为1000像素/ 750像素=〜1.33。例如，当您有8个项目时，您的容器将占用2000像素（8（250像素）），这意味着它只能滚动1000像素。比率为1000像素/ 1000像素，即1。

====

您现在要做的是：

确定包含所有容器的容器的宽度项目。
计算您的容器可以滚动的最大距离（maxScrollDistance = containerWidth-屏幕宽度）。
计算比率（screenWidth / maxScrollDistance）

PS。请记住，您的解决方案无法在移动设备上运行。

如何在mousemove上水平滚动计算滚动偏移量？

1 个答案: