[英]Simple effect after scroll to top or bottom
I need to yours help with improving errors in my scipt. 我需要您的帮助,以改善我的密码错误。 Can anyone tell me what I make wrong?
谁能告诉我我做错了什么?
I use two plugin. 我使用两个插件。 First is for change custom scrollbar, Second is cut by me and paste into first call.
首先是用于更改自定义滚动条, 其次是我剪切并粘贴到首次通话中。 Below is code with comment.
下面是带注释的代码。
/* 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();
}
}
});
best regards 最好的祝福
I believe it was quite easily explained what I want to achieve.. I see that anyone can't help me. 我相信这很容易解释我想要实现的目标。我发现任何人都无法帮助我。 OK, I removed errors and I made code little simpler then earlier.
好的,我删除了错误,并使代码比以前更简单。
Thats my solution: custom scroll with effect when croll to top and bottom . 那就是我的解决方案: 自定义滚动,当滚动到顶部和底部时生效 。
/* 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"
});
});
}
}
}
}
});
I hope that will be helpfull for someone who search like that effect. 希望对喜欢这种效果的人有所帮助。 If I have error in above code then please write here.
如果我在上面的代码中有错误,请在这里写。
best regards 最好的祝福
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.