想要判断指定的元素 是否进入可视区域,代码如下:
window.addEventListener('scroll',function(){
// $(window).scroll(function(){
var element=document.getElementById('div_content_2');
var elementHeight=element.clientHeight; //不随页面滚动变化
var elementOffsetTop=element.offsetTop; //距离顶部的距离,不随页面滚动变化
var windowHeight=document.documentElement.clientHeight; //浏览器窗口的高度,不随页面滚动变化
var windowScrollTop=document.documentElement.scrollTop; //页面垂直的滚动距离,随页面滚动变化
if(windowScrollTop-windowScrollTop_last>0){
//from top to bottom
// console.log('top->bottom');
$('#div_console').text('top->bottom');
// windowScrollTop由小变大
// windowScrollTop = elementOffsetTop - windowHeight (目标元素刚进入可视区域)
// windowScrollTop = elementOffsetTop + elementHeight(目标元素刚离开可视区域)
// if((windowScrollTop>=elementOffsetTop-windowHeight)&&(windowScrollTop<=elementOffsetTop+elementHeight)){
if((windowScrollTop>=elementOffsetTop-windowHeight+ratio_height*elementHeight)&&(windowScrollTop<=elementOffsetTop+elementHeight)){
// console.log('进入可视区域');
$('#div_console').text('进入可视区域');
anime_in();
}else{
// console.log('不在可视区域');
anime_out();
}
}else{
//from bottom to top
// console.log('bottom->top');
// windowScrollTop由大变小
// windowScrollTop = elementOffsetTop + elementHeight(目标元素刚进入可视区域)
// windowScrollTop = elementOffsetTop - windowHeight (目标元素刚离开可视区域)
if((windowScrollTop<=elementOffsetTop+(1-ratio_height)*elementHeight)&&(windowScrollTop>=elementOffsetTop-windowHeight)){
// console.log('进入可视区域');
anime_in();
}else{
// console.log('不在可视区域');
anime_out();
}
}
windowScrollTop_last=windowScrollTop;
});
完整的页面:http://makusi.cn/Home/Test/sc...
实测PC和ios都是正常的,但是在安卓微信中无法触发,
请问各位有知道如何解决的吗?
现在的推荐做法应该是用新的 API
IntersectionObserver
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
https://www.zhangxinxu.com/wordpress/2020/12/js-intersectionobserver-nav/
https://segmentfault.com/a/1190000039866671