Я использую javascript анимацию с плавной прокруткой для моего сайта электронной коммерции WordPress https://harperaustralia.com/, как показано на https://tympanus.net/Tutorials/SmoothScrollAnimations/
Однако прокрутка прекращается до нижней части страницы и обрезает последние несколько строк контента и нижний колонтитул. Мне нужно увеличивать и уменьшать масштаб, прежде чем он сможет продолжить прокрутку вниз страницы. Похоже, что это не проблема в демоверсии.
HTML распространяется по заголовкам. php, page. php и файлам нижнего колонтитула. 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 связан в нижнем колонтитуле. php file
<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-поведения: smooth; } чтобы увидеть, были ли конфликты, но они не решили проблему. Буду очень признателен за любые предложения относительно того, что я делаю неправильно!
Спасибо