Question

我正在制作幻灯片显示区域。我想这样做，所以水平滚动会触发动画，将可滚动区域移动到下一个“幻灯片”。

一切正常，但只有我滚动一点点。如果我滚动更多，GSAP滚动动画将无声地失败。

有两种方法可以解决这个问题，我可以想到：

1＆gt;第一个是取消滚动行为，如下所示：

$viewing_area.scroll( function(event) {
   if(animationIsInProgress) {
       event.preventDefault();
   }
}

但这种方式也可能会阻止GSAP滚动。没有办法区分滚动是由于GSAP还是我所知道的用户。

2＆gt;第二种方法是让GSAP强制滚动用户正在做的任何事情：

TweenLite.to($viewing_area, time, { 
    scrollTo: { x: slide_stops[nextTarget] }, 
    ease: Power4.easeInOut,
    onComplete: function() {
        console.log('scrolling completed');
        animationIsInProgress = false;
    }
    //Some option for forcing the behavior over user scrolling
});

这些事情中的任何一个是可以实现的，还是按其性质滚动，不可阻挡？

Answer 1

最终，GSAP滚动到插件有一个设置：

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

它被称为autokill，如果设置为false，则用户滚动不会中断补间。

function exceptionLoggingService($injector) {
    function error(exception, cause) {

        // preserve the default behaviour which will log the error
        // to the console, and allow the application to continue running.
        var $log = $injector.get('$log');
        var $window = $injector.get('$window');
        $log.error.apply($log, arguments);

        var errorMessage = exception.toString();

        StackTrace.fromError(exception).then(function (arrayStack) {
            var exceptionData = angular.toJson({
                errorUrl: $window.location.href,
                errorMessage: errorMessage,
                stackTrace: arrayStack,
                cause: ( cause || "" )
            });
            // now post this exceptionData to your backend
        }).catch(function (backendLoggingError) {
            $log.warn("Error logging failure.");
            $log.log(backendLoggingError);
        });

    }

    return(error);
}

angular.module('dashboard-ui').factory('$exceptionHandler', ['$injector', exceptionLoggingService])

JS：preventDefault for User Scrolling？或者强制GSAP滚动用户？

1 个答案: