时间戳

首页 > 解决方案 > 如何在没有滚动条（实际上是滚动）的情况下在滚动时增加一个数字？

javascript - 如何在没有滚动条（实际上是滚动）的情况下在滚动时增加一个数字？

问题描述

因此，想象 2 个部分/div（都带有width: 100%和height: 100%）。我只看到第一部分，第二部分在屏幕右侧，看不到（溢出：隐藏；在身体上）。

现在，当我滚动时，我希望第二部分逐渐出现，每个像素我都在“滚动”。

但是，这里的问题是，我实际上无法滚动，因此诸如此类的属性：window.pageYOffset，element.getBoundingClientRect()不起作用。基本上，我想在每次做滚动手势时增加一个数字，所以我可以将该数字分配给第二部分（修改其 left 属性，使其可以进入视口）。而且我不知道如何增加数字。

这是对我要完成的工作的一种娱乐：

var secondSection = document.getElementsByClassName("second-section")[0];



function leftTransition(){
   /*secondSection.style.left = number to be incremented + "px";*/ 
}

document.addEventListener("scroll", leftTransition);
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.first-section, .second-section {
  width: 100%;
  height: 100%;
}

.second-section {
  position: absolute;
  top: 0;
  left: 100%;
  background-color: blue;
}
<div class="first-section">
  content
  content
 </div>
 
 <div class="second-section">
  content
  content
 </div>

标签： javascripthtmlcss

解决方案

如果您参加wheel活动，这样的事情可能类似于您正在尝试做的事情。然后，您可以在页面尽可能多的视图中删除事件处理程序。

var secondSection = document.getElementsByClassName("second-section")[0];
function leftTransition( event ){
  var offset = event.deltaY;
  var left = offset < 0
    ? ( parseInt( secondSection.style.left ) + 1 ) + '%'
    : ( parseInt( secondSection.style.left ) - 1 ) + '%';
  secondSection.style.left = left;
}
window.addEventListener("wheel", leftTransition);
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.first-section, .second-section {
  width: 100%;
  height: 100%;
  background-color: steelblue;
}
.second-section {
  position: absolute;
  top: 0;
  background-color: blue;
}
<div class="first-section">content content</div>
<div class="second-section" style="left: 100%">content content</div>

推荐阅读