[英]viewport height difference breaks scroll event
I am looking to add a CSS effect to some columns once they come into the viewport. 我希望在某些列进入视口后为其添加CSS效果。 I took an answer from another SO post: See here .
我从另一篇SO帖子中得到了答案: 请参见此处 。 The original files are on wordpress, which I believe doesn't really matter.
原始文件在wordpress上,我认为这并不重要。 jQuery works as intended, however, after some troubleshooting it appears that with the answer from the other SO post, the condition of
elemTop < viewportBottom
never comes true and the event never fires. jQuery可以按预期工作,但是,在进行了一些故障排除后,似乎从另一个SO帖子中得到了答案,
elemTop < viewportBottom
的条件永远不会成真,事件也不会触发。
<div class="content"></div>
<div class="wrapper">
<div class="column first-column">
<p><strong>title</strong></p>
<p>lorem.</p>
</div>
<div class="column second-column">
<p><strong>title</strong></p>
<p>ipsum.</p>
</div>
<div class="column third-column">
<p><strong>title</strong></p>
<p>dolor.</p>
</div>
</div>
As far as on codepen, if I set the height of content
to height: 84vh;
至于codepen,如果我将
content
的高度设置为height: 84vh;
it works perfectly. 它完美地工作。 Anything higher breaks the functionality.
更高的破坏功能。 My local dev project has different dimensions and doesn't work at all.
我本地的开发项目有不同的规模,根本无法使用。
Also, I'm working with Chrome. 另外,我正在使用Chrome。 Firefox seems to be working fine if I'm not mistaken.
如果我没有记错的话,Firefox似乎运行良好。
I've seen various solutions, to include: 我看过各种解决方案,包括:
overflow: auto
(I'm not sure on which but I've tried setting this on all) overflow: auto
(我不确定在哪一个上,但是我已经尝试过全部设置) None of the above solutions work. 以上解决方案均无效。 Here is my CodePen .
这是我的CodePen 。
Here is the lengthy JS & CSS: 这是冗长的JS和CSS:
function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var scrollElem =
navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? "body" : "html";
var viewportTop = $(scrollElem).scrollTop();
console.log(viewportTop);
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round($elem.offset().top);
var elemBottom = elemTop + $elem.height();
return elemTop < viewportBottom && elemBottom > viewportTop;
}
// Check if it's time to start the animation.
function checkAnimation() {
var $elem = $(".first-column");
var $elemTwo = $(".second-column");
var $elemThree = $(".third-column");
// If the animation has already been started
if (
$elem.hasClass("first-column-start") ||
$elemTwo.hasClass("second-column-start") ||
$elemThree.hasClass("third-column-start")
)
return;
if (isElementInViewport($elem)) {
// Start the animation
$elem.addClass("first-column-start");
$elemTwo.addClass("second-column-start");
$elemThree.addClass("third-column-start");
}
}
// Capture scroll events
$(window).scroll(function() {
checkAnimation();
});
CSS is only an excerpt: CSS只是摘录:
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.column {
background: #e2e3e5;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.26);
margin: 0 32px 14px 0;
max-width: 250px;
padding: 1rem;
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInTop {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(20%, 0, 0);
transform: translate3d(20%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.first-column-start {
-webkit-animation: fadeInLeft 0.8s;
-moz-animation: fadeInLeft 0.8s;
-ms-animation: fadeInLeft 0.8s;
-o-animation: fadeInLeft 0.8s;
animation: fadeInLeft 0.8s;
}
.second-column-start {
-webkit-animation: fadeInTop 0.8s;
-moz-animation: fadeInTop 0.8s;
-ms-animation: fadeInTop 0.8s;
-o-animation: fadeInTop 0.8s;
animation: fadeInTop 0.8s;
}
.third-column-start {
-webkit-animation: fadeInRight 0.8s;
-moz-animation: fadeInRight 0.8s;
-ms-animation: fadeInRight 0.8s;
-o-animation: fadeInRight 0.8s;
animation: fadeInRight 0.8s;
}
How do I make this work? 我该如何工作? Thank you
谢谢
I'd use var viewportTop = $(document).scrollTop();
我会用
var viewportTop = $(document).scrollTop();
or 要么
var scrollElem = navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? document : "html";`
"body" does seem to return 0 while scrolling (admittedly I'm unable to provide a proper explanation as to why, right now) 滚动时“ body”似乎确实返回0(坦白地说,我目前无法提供有关其原因的适当解释)
Also, it would be a good idea to maintain references to your queries in Jquery in the outer scope. 另外,最好在外部范围的Jquery中维护对查询的引用。
var $elem = $(".first-column");
var $elemTwo = $(".second-column");
var $elemThree = $(".third-column");
function isElementInViewport(elem) {
// Get the scroll position of the page.
var scrollElem =
navigator.userAgent.toLowerCase().indexOf("webkit") != -1 ? document : "html";
var viewportTop = $(scrollElem).scrollTop();
console.log(viewportTop);
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
var elemTop = Math.round($elem.offset().top);
var elemBottom = elemTop + $elem.height();
return elemTop < viewportBottom && elemBottom > viewportTop;
}
// Check if it's time to start the animation.
function checkAnimation() {
// If the animation has already been started
if (
$elem.hasClass("first-column-start") ||
$elemTwo.hasClass("second-column-start") ||
$elemThree.hasClass("third-column-start")
)
return;
if (isElementInViewport($elem)) {
console.log("Hi");
// Start the animation
$elem.addClass("first-column-start");
$elemTwo.addClass("second-column-start");
$elemThree.addClass("third-column-start");
}
}
// Capture scroll events
$(window).scroll(function() {
checkAnimation();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.