Question

因此，假设有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>

Answer 1

如果您参加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>

在没有滚动条的情况下如何滚动增加数字（实际滚动）？

1 个答案: