【发布时间】：2017-10-19 19:00:01
【问题描述】：
我正在使用ScrollStop 创建一种 z 轴时间线。它使用滚动事件来循环浏览时间线内容。
代码在这里作为网站上传http://jcwebandgraphic.com/archive2/
问题：
我已经使用mouseenter 和mouseleave 来触发 CSS 更改 - 溢出隐藏和溢出可见，以防止在时间轴 div 中滚动时在正文上滚动。
这已成功停止正文滚动，但似乎也停止了允许我使用滚动事件在时间轴中移动的 scrollstop 功能。
这是因为滚动事件依赖于坐标输入，并且由于身体滚动被锁定，它没有得到这些？是别的吗？您对我的项目如何使用有任何提示吗？这个项目有更好的事件监听器或滚动锁定方法吗？
代码：
<script>
// When the Window Object is loaded and a Scroll Event is initiated, The following functions will Be Fired
$(window).on('scrollstart', function() {
// Timeline Functions for Touchless Devices
// Block 1 - Scroll Locking
// Locks Body Scrolling While in Timeline
$('#timeline').on('mouseenter', function() {
$('body').css('overflow', 'hidden');
}); // Closes $(#timeline) mouseenter Function
// Rerstores Body Scrolling While Out of Timeline
$('#timeline').on('mouseleave', function() {
$('body').css('overflow', 'visible');
}); // Closes $(#timeline) mouseleave Function
// Closes Functions Block 1
// Closes Block 1 - Scroll Locking
// Block 2 - Transitions
// Reassigns jQuery Defined HTML Objects as HTML Elements (For Removal and Re-Insertion to the DOM)
var last = $('.scroll li:last-child')[0]; // Convert to HTML Element jQuery Element
var parent = last.parentElement;
// Animate to 0 Opacity
$('.scroll li:last-child').animate({opacity: '.1'});
// Animation and Re-Ordering Block
// 1 Removes Last Child From the DOM
// 2 Forces Opacity Back to 1
// 3 Re-Inserts it into the DOM at the First Child Position
// 1 Removal
parent.removeChild(last);
// 2 Opacity
last.style.opacity = 1;
// 3 Re-insertion
parent.insertBefore(last, parent.firstElementChild)
// Closes Animation and Re-Ordering Block
// Closes Block 2 - Transitions
}); //Closes $(window) Load Functions
// Required Fixes
// 1 Size / Positioning Glitch on mouseenter, mouseleave (CSS, jQuery)
// 2 Restore Scroll Transitions on mouseenter (jQuery)
// 3 Touch Device Usability for Simulated or Alternate mouseenter and mouseleave Functions
// 4 Create Function Looping if Scroll Event lasts more than ~250ms
// 5 Make #timeline Height Responsive
// Completed Fixes
// 9 Scroll Only Works on First Refresh, or Directly from File
// 8 Functions Break When Removing Unnecessary HTML Content
// 7 Body Continues to Scroll While Scrolling Through Timeline
// 6 Collapsing Parent Element on #timeline
// 5 Last Child Failing to Re-Order
// 4 Limited Scroll Area Forces Premature Animation Transition Completion
// 3 Limited Scroll Area Prevents Opacity Completion
// 2 Uncaught Exception Errors (4)
// 1 Uncaught Token Errors (2)
</script>
<body>
<!-- Timeline -->
<section id='timeline'>
<h2 class='subtitle'>Timeline</h2>
<div class='scroll'>
<li><img src='images/pa3.jpg'></li>
<li><img src='images/pa2.jpg'></li>
<li><img src='images/pa1.jpg'></li>
</div>
</section>
<!-- Closes Timeline -->
</body>
【问题讨论】：
-
不知道你是不是想实现像BBC最近开始做的那样的视差滚动效果，例如bbc.co.uk/news/special/2014/newsspec_7617/index.html。
标签： javascript jquery html css