滚动到顶部或底部后的简单效果

Question

我需要你的帮助来改进我的脚本中的错误。谁能告诉我我做错了什么？

我用了两个插件。 First is for change custom scrollbar, Second 被我剪切并粘贴到第一个调用中。下面是带注释的代码。

/* Set custom scrollbar for content-section */
    jQuery('.carousel-item').mCustomScrollbar({ axis:"y", theme: "rounded-dots", scrollButtons: { enable: true }, scrollInertia: 300,
        callbacks:{
            whileScrolling:function(){
                /* this.mcs.draggerTop <- I get it from First script (official page) example: Returning values */
                var pct=this.mcs.draggerTop;
                /*Below plugin is used for nice scrolling effect. I get it from github Second script. Below code was in jquery.fancy-scroll.js file. */
                var defaults = {
                    animation: "bounce",
                    bounceDistance: 150,
                    animDuration: "0.3s",
                    animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)",
                    innerWrapper: '.carousel-item'
                };
                fancy_scroll = function(options){
                    var settings = $.extend({}, defaults, options),
                        el = $(settings.innerWrapper),
                        container = $(this),
                        posWas = 0,
                        status = "off";
                    $.fn.bounceEffect = function(px, s, anim, settings) { 
                        var selector = $(this) 
                        selector.css({
                            "-webkit-transform": "translate3d(0, " + px + ", 0)",
                            "-webkit-transition": "all " + s + " " + anim,
                            "-moz-transform": "translate3d(0, " + px + ", 0)",
                            "-moz-transition": "all " + s + " " + anim,
                            "-ms-transform": "translate3d(0, " + px + ", 0)", 
                            "-ms-transition": "all " + s + " " + anim,
                            "transform": "translate3d(0, " + px + ", 0)",
                            "transition": "all " + s + " " + anim
                        })
                    }
                    if(pct==100){//if the user is scrolling down...
                        alert('dol');
                        if(status == "off") {
                            status = "on"
                            $('.carousel-item').bounceEffect(settings.bounceDistance * -1 + "px", settings.animDuration, settings.animEasing, settings);
                            $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                                $('.carousel-item').bounceEffect("0", settings.animDuration, settings.animEasing, settings);
                                $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                                    status = "off"
                                });
                            });
                        }
                    }
                    if(pct==0){ //if the user is scrolling up...
                        if(status == "off") {
                            if(container.scrollTop() <= 0) {
                                status = "on"
                                $('.carousel-item').bounceEffect(settings.bounceDistance + "px", settings.animDuration, settings.animEasing, settings);
                                $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                                    $('.carousel-item').bounceEffect("0px", settings.animDuration, settings.animEasing, settings);
                                    $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                                        status = "off"
                                    });
                                });
                            }
                        }
                    }
                }
                fancy_scroll();
            }
        }
    });

此致

Answer 1

我相信这很容易解释我想要实现的目标。我发现任何人都帮不了我。好的，我删除了错误，并使代码比之前更简单。

这就是我的解决方案：滚动到顶部和底部时具有效果的自定义滚动。

/* Set custom scrollbar for content-section */
jQuery('.carousel-item').mCustomScrollbar({ axis:"y", theme: "rounded-dots", scrollButtons: { enable: true }, scrollInertia: 100,
    callbacks:{
        whileScrolling:function(){
            var pct=this.mcs.topPct;
            /*$("#mcs-dragger-top").text(this.mcs.topPct);*/
            // alert(pct);
            /*Plugin is used for nice scrolling effect*/
            var settings = {
                    animation: "bounce",
                    bounceDistance: 60,
                    animDuration: "0.19s",
                    animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)" },
                el = $('.carousel-item'),
                container = $('.carousel-item'),
                posWas = 0,
                status = "off";
            $.fn.bounceEffect = function(px, s, anim, settings) { 
                $('.carousel-item').css({
                    "-webkit-transform": "translate3d(0, " + px + ", 0)",
                    "-webkit-transition": "all " + s + " " + anim,
                    "-moz-transform": "translate3d(0, " + px + ", 0)",
                    "-moz-transition": "all " + s + " " + anim,
                    "-ms-transform": "translate3d(0, " + px + ", 0)", 
                    "-ms-transition": "all " + s + " " + anim,
                    "transform": "translate3d(0, " + px + ", 0)",
                    "transition": "all " + s + " " + anim
                })
            }
            if(pct==100){//if the user is scrolling down...
                if(status == "off") {
                    status = "on"
                    $('.carousel-item').bounceEffect(settings.bounceDistance * -1 + "px", settings.animDuration, settings.animEasing, settings);
                    $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                        $('.carousel-item').bounceEffect("0", settings.animDuration, settings.animEasing, settings);
                        $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                            status = "off"
                        });
                    });
                }
            }
            if(pct==0){ //if the user is scrolling up...
                if(status == "off") {
                    status = "on"
                    $('.carousel-item').bounceEffect(settings.bounceDistance + "px", settings.animDuration, settings.animEasing, settings);
                    $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                        $('.carousel-item').bounceEffect("0px", settings.animDuration, settings.animEasing, settings);
                        $('.carousel-item').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) {
                            status = "off"
                        });
                    });
                }
            }
        }
    }
});

我希望这对搜索类似效果的人有所帮助。如果我在上面的代码中有错误，请写在这里。

此致

滚动到顶部或底部后的简单效果

Simple effect after scroll to top or bottom

javascript

jquery

css

scrollbars