CODEWITHSUNDEEP
jquerysmooth-scrollingwindow-resizeautoresize
Igor Laszlo
Igor Laszlo

Reputation: 742

Lenis smoothscroll: does not scroll to bottom after drop down animation of an element on Firefox

EDIT: It seems that it works on Chrome and Edge. On the latest Safari version for windows (5.1.7) it does not work as it did not support "=>" and Safari does not support Windows 10 update anymore, so it may works on newer versions. So, my post is for Firefox!

The problem is beyond my knowledge even if I find similar examples (however they are not exactly the same cases because it uses Lenis with data attributes), for example here: https://lenis-scroll-master.webflow.io/ (there is also a dropdown animation).

As in above link, I have a hidden element (margin top - element height, overflow hidden) and a button in the smooth scrolled parent container. When user click on button, the element gets margin-top 0. After this animation, the parent container can not be scrolled completely upto the bottom. If I resize the screen (enough only once), the scroll functions well again.

I would like the scrolling to work automatically without manually resizing the screen.

My jQuery for Lenis init :

const pageElements = document.querySelectorAll('.page');
// Create a new instance of Lenis for each page element
pageElements.forEach((pageElement) => {
    const lenis = new Lenis({
        wrapper: pageElement,
        content: pageElement,
        duration: 1.2,
        easing: function(t){return (t === 1 ? 1 : 1 - Math.pow(2, -10 * t))},//(t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)), "easeOutCirc",
        direction: 'vertical',
        gestureDirection: 'vertical',
        smooth: true,
        smoothWheel: true,
        smoothTouch: false,
        touchMultiplier: 2,
        autoResize: true,
    });
    function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);
});

My jQuery for my button/slide up/down element animation (this is the filters group of isotope.js grid) :

var $filtersnav = $('.filters-nav');
var filtersnavHeight = $filtersnav.height() + 30;
var clickCounter = 0;
$filtersnav.css('margin-top', -1 * filtersnavHeight);

$('.filters-bttn').click(function() {
    var $filtersnav = $('.filters-nav');
    var filtersnavHeight = $filtersnav.height() + 30;
    if (clickCounter % 2 === 0) {
        $filtersnav.css('margin-top', '0');
    } else {
        $filtersnav.css('margin-top', -1 * filtersnavHeight);
    }
    clickCounter++;
});

My CSS of my page, filters group and button elements :

.page {
position: relative;
z-index: 5;
/* Hide scrollbar on html but let scrolling */
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;  /* Internet Explorer 10+ */
width: 100%;
height: 100vh;
pointer-events: auto;
background-color: #f7f7f7;
-webkit-transition: -webkit-transform 0.45s, opacity 0.45s;
transition: transform 0.45s, opacity 0.45s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}
.filters-bttn {
position:relative;
display:block;
height:50px;
z-index:2;
}
.filters-nav {
position:relative;
display:block;
-webkit-transition: all 0.65s ease;
transition: all 0.65s ease;
z-index:1;
}

Upvotes: 0

Views: 749

Answers (1)

T H
T H

Reputation: 1

function triggerResizeEvent() {
  // resizeイベントを作成
  const event = new Event('resize');
  // イベントをウィンドウにディスパッチ
  window.dispatchEvent(event);
}
    
// この関数を呼び出すことで、resizeイベントが発火し、Lenisが高さを再取得する
triggerResizeEvent();
``

lenis is reset height in window resize.
so this solution is not good but work.

Upvotes: 0

Related Questions