1

我正在实现页面的滚动劫持，并且喜欢使用事件处理程序 ontransitionend 来跟踪 CSS3 转换 translate3d 的结束。

但是，我有时会“丢失”事件处理程序并且它不会触发 ontransitionend。

有谁知道会发生什么？

我不想使用 jQuery 动画，因为它们运行缓慢，并且 set-timeout 会导致滞后/闪烁。不确定实现此效果的其他好方法。

.content {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    padding: 0;
    .transition(all 1500ms ease); // LESS mixin w/ transition prefixes
}
.page {
    width: 100%;
    height: 100vh;
}

<div class="content-wrapper">
    <div class="content">
        <section class="page target" id="One"></section>
        <section class="page target" id="Two"></section>
        <section class="page target" id="Three"></section>
    </div>
    <div class="footer">
    </div>
</div>


var total_sections = $('.page.target').length;
var is_moving = false;

$(window).on({
    'DOMMouseScroll mousewheel': detectScroll
});

// transitionend, runs into = problems
$('.content, .footer').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
    is_moving = false;
});

function detectScroll (e) {
    if(is_moving) {
        return false;
    }
    is_moving = true;
    (function() { 
        scrollPage(e.originalEvent.wheelDelta > 0 ? 'up' : 'down'); 
    })();
    // return false;
}

var curr_section = 0;   // we always start at top of page
function scrollPage(dir) {
    setTarget(curr_section, dir);
}

function setTarget(curr, dir) {
    var target;
    if(dir == 'up') {
        target = curr-1;
    }
    if(dir == 'down') {
        target = curr+1;
    }
    var h = $('.page.target').height();
    target = target * h * -1;

    is_moving = true;

    // jquery animations run slower than css3 transitions :(
    // $('.content, .footer').animate({
    //  'top': target
    // }, 50);

    $('.content, .footer').css({
        'transform': 'translate3d(0px, ' + target + 'px, 0px)'
    });
    // is_moving = false after transition ends

    // using settimeout to reset is_moving causes a "flicker" / jump
    // var transition_speed = 1600;
    // window.setTimeout(function(){
    //  is_moving = false;
    // }, transition_speed);

    // reset current section
    if(dir == 'up') {
        curr_section = curr_section-1;
    }
    if(dir == 'down') {
        curr_section = curr_section+1;
    }
}
4

2 回答 2

0

好的，如果其他人遇到这个问题，那么想出了一个解决方案。

本质上 ontransitionend 在用户完全停止物理滚动之前不会触发（因此，在滚动结束时）。

我最终使用当前部分的偏移顶部来确定目标是否被击中/动画是否结束。但是，遇到了同样的问题。在我物理停止滚动鼠标之前，滚动期间的偏移顶部不会更新；我需要一些更敏感的东西。

我最终在当前部分使用了 .hide().show() ，因此在滚动期间不断更新 DOM，现在 offset().top 更新（即使我仍在物理滚动鼠标滚轮）。

这有点骇人听闻，但它确实有效。

于 2015-10-07T15:28:48.470 回答
0

从 One 切换到 on 怎么样？

$('.content').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend','.footer', function(e) { is_moving = false; });

于 2015-09-29T08:15:59.650 回答