jQuery custom content scroller + scrollreveal или fadeIn content

250
25 мая 2017, 10:43

Добрый, для скрол использую custom content scroller, по факту же получается что плагин создает обертку для контента в которой прокручивает контент, дело в том, что в контентной часи находиться плитка, и при скроле эта плитка должна плавно появляться(fade in) т.е. когда контент в области видимости плитки плавно появляются, если не использовать custom content scroller а осталвить нативынй скрол плитки отрабатываеют нормально, для появления плиток использовал scroll reveal, либо функцию:

 /* Every time the window is scrolled ... */
 var container = $(window);
 container.scroll( function(){
     /* Check the location of each desired element */
     $('.jsShow').each( function(i){
         var bottom_of_object = $(this).offset().top + $(this).outerHeight();
         var bottom_of_window = container.scrollTop() + scrh.height();
         /* If the object is completely visible in the window, fade it it */
         if( bottom_of_window > bottom_of_object ){
             $(this).animate({'opacity':'1'},500);
         }
     }); 
 });

С нативным скролом работает, но при использовании кастомных скролов объекты не определяются внутри обертки кастомного скрола. Есть идеи как заставить показывать плитки при скроле не используя нативный скрол?

Инициализация custom scroll bar:

var scrollers = [
    {
        element: $('body'),
        params:{
            autoHideScrollbar: true
        },
        options:{
            type:'width',
            value: 1024
        }
    }
]

$(window).on("load resize",function(){
    scrollers[0].element.mCustomScrollbar(
        scrollers[0].params
    ); 
});

Инициализация scrollreveal:

window.sr = ScrollReveal();
sr.reveal('.jsShow');
/*.jsShow это класс элемента плитки
при инициализации плитки начинают плавно появлятья при прокрутке с 
наитвынм скролом но с кастомным они не работают */

Если не использовать плагин scrollreval можно использовать функцию выше которая будет добавлять свойство opacity 1 к класу .jsShow, но опять же функция работает с обектом $(window).Реализация этой функции на фидле

Второй день вожусь уже, ведь как-то используют кастомный скрол и появление плиток при прокрутке, на забугорном стаке много issues с подобными косяками. Люди исплользуют разные кастомные скролы и нифига не работает.

Рабочий пример с нативным скролом

Пример с кастомным скролом (если потянуть за край браузер тогда плитки выскакивают)

READ ALSO
Метод filter для массива - непонятное условие

Метод filter для массива - непонятное условие

Есть задачкаУдалить все элементы из массива (arguments[0]), которые содержат значения из arguments[1], [2]

239
Рендеринг компоненты из редьюсера

Рендеринг компоненты из редьюсера

Добрый вечерСтолкнулась со следующей проблемой:

231
Как получить значение с callback функции?

Как получить значение с callback функции?

Есть некий запрос к IndexedDB

309
Скрытие блоков jQuery

Скрытие блоков jQuery

Доброго времени суток,

279