0
Мне нужна ваша помощь с улучшением ошибок в моем сеансе. Может ли кто-нибудь сказать мне, что я делаю неправильно?Простой эффект после прокрутки вверх или вниз
Я использую два плагина. First для изменения пользовательский полоса прокрутки, 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();
}
}
});
наилучшими пожеланиями
Какие ошибки вы получаете? Что именно вы хотите? Можете ли вы представить рабочий пример (как можно ближе)? Сброс кода с минимальными усилиями вряд ли даст вам хороший ответ. – DBS
Спасибо за ответ. Вот мой https://jsfiddle.net/9jbjrgjs/1/ (мой первый jsfiddle :)) Я хотел бы добавить эффект перехода, когда, например, Я прокручиваю до нижнего содержимого div: if (pct == 100) или top: if (pct == 0), но я думаю, что я делаю большую ошибку с вставным кодом с не слишком большой модификацией. Я использую jQuery() .. вместо $(). потому что у меня есть файл верхнего скрипта: '$ (document) .ready (function ($) { jQuery.noConflict();' – ZicoPL