编辑:它似乎适用于 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;
}
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.