Lenis smoothscroll：在 Firefox 上元素的下拉动画后不会滚动到底部

Question

编辑：它似乎适用于 Chrome 和 Edge。在最新的 Windows Safari 版本 (5.1.7) 上，它无法工作，因为它不支持“=>”，并且 Safari 不再支持 Windows 10 更新，因此它可能适用于较新的版本。所以，我的帖子是针对 Firefox 的！

即使我找到类似的示例，问题也超出了我的知识范围（但是它们并不完全相同，因为它使用带有数据属性的 Lenis），例如这里：https://lenis-scroll-master.webflow.io/ （还有一个下拉动画）。

如上面的链接所示，我在平滑滚动的父容器中有一个隐藏元素（边距顶部 - 元素高度，溢出隐藏）和一个按钮。当用户单击按钮时，元素的 margin-top 为 0。在此动画之后，父容器无法完全滚动到底部。如果我调整屏幕大小（一次就足够了），滚动功能会再次正常运行。

我希望滚动能够自动工作，而无需手动调整屏幕大小。

我的 Lenis 初始化 jQuery :

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);
});

我的按钮/向上/向下滑动元素动画的 jQuery（这是 isotope.js 网格的过滤器组）：

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++;
});

我的页面 CSS、过滤器组和按钮元素：

.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;
}

Answer 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.