时间戳

首页 > 解决方案 > Javascript滚动动画切断页面

javascript - Javascript滚动动画切断页面

问题描述

我正在为我的 wordpress 电子商务网站https://harperaustralia.com/使用 javascript 平滑滚动动画，如https://tympanus.net/Tutorials/SmoothScrollAnimations/上所示

但是，滚动在页面底部之前停止并切断最后几行内容和页脚。我需要放大和缩小才能继续滚动到页面底部。这在演示中似乎不是问题。

HTML 分布在 header.php、page.php 和 footer.php 文件中，并包含一个固定容器，而 [data-scroll] div 将被翻译。

<main>
<div id="nav">navigation and logo here</div><!-- /END NAV -->
<div data-scroll>
<div id="header"></div><!-- /END HEADER -->
<div id="content">

<?php
    wp_reset_query(); // necessary to reset query
    while ( have_posts() ) : the_post();
        the_content();
    endwhile; // End of the loop.
?>

</div><!-- /END CONTENT -->
<div id="footer">footer content here</div><!-- /END FOOTER -->
</div><!-- /END DATA SCROLL -->
</main>

相关的CSS是

[data-scroll] {
    will-change: transform;
}


element.style {

    transform: matrix(0, 0, 0, 1, 0, 600);
    transform-origin: 100% 50% 0px;
    opacity: 1
}

* {
    margin:0;
    padding:0;
    }

html {
scroll-behavior: smooth;
overscroll-behavior: none;
}

body {
    /* PADDING SAME AS FOOTER HEIGHT */
    overflow-y: scroll;
    overflow-x: hidden;
    min-height: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing:antialiased;
    }


main {
animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

javascript 链接在 footer.php 文件中

<script src="https://harperaustralia.com/wp-content/plugins/smoothscroll/imagesloaded.pkgd.min.js"></script>
<script src="https://harperaustralia.com/wp-content/plugins/smoothscroll/smoothscroll.js"></script>

我尝试更改容器的高度并删除 html {scroll-behavior: smooth; } 看看是否有冲突，但这些并没有解决问题。我真的很感激任何关于我做错了什么的建议！

谢谢

标签： javascriptphphtmlcss

解决方案

我认为您尝试在加载所有内容之前获取显示高度。加载所有内容后，您应该调用滚动脚本，以防止滚动中断。

在开发人员工具中查看您的 body 标签，您会自己看到它。

<body style="height: 5096px;">

您可以做的其他事情是设置溢出-y：在正文标签上滚动。

推荐阅读