Задать вопрос
AntonEssential
@AntonEssential

Как исправить баг с jQuery custom content scroller + плитки или scrollreveal?

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

/* 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 с подобными косяками.
Люди исплользуют разные кастомные скролы и нифига не работает.

Рабочий пример с нативным скролом
Пример с кастомным скролом (если потянуть за край браузер тогда плитки выскакивают)
  • Вопрос задан
  • 202 просмотра
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Фронтенд-разработчик расширенный
    13 месяцев
    Далее
  • Академия Eduson
    Fullstack-разработчик на JavaScript
    11 месяцев
    Далее
  • Skillbox
    JavaScript
    3 месяца
    Далее
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы