自定义滚动UX
我目前正在从事一个项目，在这个项目中，所需的用户体验涉及到与滚动事件的非常定制的交互。
要解决的问题：页面有X个部分，每个区段的高度等于视图高度height: 100vh;。当用户在视口上滚动时，当前可见部分保持在原处，滚动指示器根据滚动距离阈值(例如，30 it )绘制动画。一旦用户滚动了阈值，下一节就会从屏幕底部出现，并覆盖当前部分(该部分仍然没有移动)。
初始方法：将每个区段设置为一个绝对位置，并通过根据scrollwheel事件更改scrollwheel类来调整它们。Body overflow:hidden和transform属性来操作节。不过，我正在讨论一些问题。
- 滚动轮事件似乎被记录为非常不稳定的解决方案来实现。
- 事件的.wheelDelta方面是异步触发的，很难用它捕获手势。(在chrome上，它只是吐出3倍的倍数，而不是px中手势的距离)。这使得很难设置阈值并激活响应该阈值的元素。
我基本上希望能够跟踪滚动轮事件覆盖的像素数，并将该数字应用到某个滚动提示元素的位置，直到满足滚动阈值。一旦满足，函数就会触发来更改类并更新页面上的一些信息。如果不满足阈值，滚动提示元素将返回到它的默认位置。
我的附加方法对实现这一点没有多大帮助，所以我想找一种不同的、更稳定的方法，或者是对这种方法做错了什么以使其稳定的修订/批评。
(function scrollerTest($){
$('body').on ('mousewheel', function (e) {
var delta = e.originalEvent.wheelDelta,
currentScreenID = $('section.active').data('self').section_id,
currentScreen = $('section.part-' + currentScreenID),
nextScreenID = currentScreenID + 1,
nextScreen = $('section.part-' + nextScreenID);;
if (delta < 0) { // User is Scrolling Down
currentScreen.removeClass('active').addClass('top');
nextScreen.removeClass('bottom').addClass('active')
} else if (delta > 0) { // User is Scrolling Up
}
});
}(jQuery));body {
overflow: hidden;
padding: 0;
margin: 0;
}
section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 999;
background-color: #CA5D44;
transition: 0.8s all ease-in-out;
}
section.part-1 {
position: relative;
z-index: 9;
}
section.part-2 {
background-color: #222629;
}
section.active {
transform: translateY(0);
}
section.top {
transform: translateY(-10%);
}
section.bottom {
transform: translateY(100%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<section class="part-1 home active" data-self='{ "section_id" : 1, "section_title" : "Home", "menu_main_clr" : "#fff" , "menu_second_clr" : "#CA5D44", "logo_clr" : "white" }'>
</section>
<section class="part-2 about bottom" data-self='{ "section_id" : 1, "section_title" : "About", "menu_main_clr" : "#CA5D44" , "menu_second_clr" : "#fff", "logo_clr" : "white" }'>
</section>
<section class="part-3 contact bottom" data-self='{ "section_id" : 1, "section_title" : "Contact", "menu_main_clr" : "#fff" , "menu_second_clr" : "#CA5D44", "logo_clr" : "white" }'>
</section>
</body>
编辑注意:代码片段似乎在触发事件和在第一个实例之后更改类方面有一些问题--不知道原因。在我当地的例子中，它一次就把他们全部解雇了。
**Edite注2：*列出的代码只是我所能达到的最接近行为的副本。不幸的是，使用这种方法，整个阈值功能似乎是无法实现的，因为轮子事件的行为不像滚动事件。
回答 2
Stack Overflow用户
发布于 2016-12-07 23:40:19
整个滚动主题相当复杂，特别是当您考虑触摸滚动事件时。有一些库--参见下面的列表，例如：http://ninodezign.com/30-jquery-plugins-for-scrolling-effects-with-css-animation/
我以前使用过https://projects.lukehaas.me/scrollify/，它可能允许您做您想做的事情(最终使用的是以前的回调)，但是我自己也无法判断。另外，与其他库相比，scrollify相对较大(8kb )。
Stack Overflow用户
发布于 2016-12-08 00:44:58
您可以通过确保每个内容填充部分后面有一个空白的透明间隙(在下面的示例中，高度也是100vh )，然后使用javascript将position:fixed应用到每个内容填充部分，当它到达视区顶部时，就可以这样做。
示例：
var screens = document.getElementsByClassName('screen');
function checkPosition() {
for (var i = 0; i < (screens.length - 1); i++) {
var topPosition = screens[i].getBoundingClientRect().top;
if (topPosition < 1) {
screens[i].style.top = '0';
screens[i].style.position = 'fixed';
}
}
}
window.addEventListener('scroll',checkPosition,false);.screen {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 100vh;
}
.red {
position: fixed;
top: 0;
background-color: rgb(255,0,0);
}
.orange {
top: 200vh;
background-color: rgb(255,140,0);
}
.yellow {
top: 400vh;
background-color: rgb(255,255,0);
}
.green {
top: 600vh;
background-color: rgb(0,191,0);
}
.blue {
top: 800vh;
background-color: rgb(0,0,127);
}
p {
font-size: 20vh;
line-height: 20vh;
text-align: center;
color: rgba(255,255,255,0.4);
}<div class="red screen">
<p>Screen One</p>
</div>
<div class="orange screen">
<p>Screen Two</p>
</div>
<div class="yellow screen">
<p>Screen Three</p>
</div>
<div class="green screen">
<p>Screen Four</p>
</div>
<div class="blue screen">
<p>Screen Five</p>
</div>
https://stackoverflow.com/questions/41029048
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号