问题描述
网上的帖子大多数是:判断一个元素是否在可视区域中
而帖子中举的例子,也是以浏览器最外层body/html的滚动条为例子,进行讲解,基本上都是如下的效果图:
注意这里的滚动条是最外层的
如需求:当红色盒子在内层滚动条滚动中出现时,就更改对应dom元素背景色为粉红色
注意这里有两个滚动条,我们的需求是里面的滚动条滚动时,去做对应控制
公式提出
公式:
滚动距离出现 = .距顶部高度 – .距顶部高度 – .自身高度
滚动距离出现 = .距顶部高度 – .距顶部高度 – .自身高度
滚动距离出现 = .距顶部高度 – .距顶部高度 – .自身高度
或:
边界值 = 目标元素距顶部高度 – 滚动盒子容器距顶部高度 – 滚动盒子容器自身高度
边界值 = 目标元素距顶部高度 – 滚动盒子容器距顶部高度 – 滚动盒子容器自身高度
边界值 = 目标元素距顶部高度 – 滚动盒子容器距顶部高度 – 滚动盒子容器自身高度
即,当滚动的距离超过这个边界值时,目标元素就会出现
这里的边界值,一定是初始边界值,就是要提前算好,最好存一份,因为滚动的话,会更改相应距离位置的
复制粘贴代码看效果更好理解:
Document
.scrollBox {
width: 100%;
height: 300px;
background-color: #ccc;
/* 拥有滚动条 */
overflow-y: auto;
}
.target {
width: 60px;
height: 60px;
background-color: red;
}
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
let scrollBoxDom = document.querySelector('.scrollBox')
let targetDom = document.querySelector('.target')
// 注意!这里的边界值,是原始的位置的值,因为滚动的话,会更改元素的getBoundingClientRect的相关值
let boundaryValue = targetDom.getBoundingClientRect().top - scrollBoxDom.getBoundingClientRect().top - scrollBoxDom.offsetHeight
// 边界值 = 目标元素距离顶部高度 - 滚动盒子容器距离顶部高度 - 滚动盒子容器自身的高度
function callBack() {
if (scrollBoxDom.scrollTop > boundaryValue) {
console.log('在可视区域');
scrollBoxDom.style.backgroundColor = 'pink'
} else {
console.log('不在可视区域');
scrollBoxDom.style.backgroundColor = '#ccc'
}
}
scrollBoxDom.addEventListener('scroll', callBack)
附-以浏览器最外层body/html的滚动条为例子代码
Document
body {
background-color: #ccc;
}
.target {
width: 60px;
height: 60px;
background-color: red;
}
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
孙悟空
window.onload = () => {
let targetDom = document.querySelector('.target') // 目标元素dom
function callBack() {
const top = targetDom.getBoundingClientRect().top; // 目标元素dom距离顶部的高度
if (top <= window.innerHeight) { // 当top小于等于文档显示区域的高时,就进入可视区域了
console.log('在可视区域');
document.body.style.background = 'pink'
} else {
console.log('不在可视区域'); // 当top大于文档显示区域的高时,就离开可视区域了
document.body.style.background = '#ccc'
}
}
window.addEventListener('scroll', callBack);
}
———END———
限 时 特 惠: 本站每日持续更新海量各大内部创业教程,永久会员只需109元,全站资源免费下载 点击查看详情
站 长 微 信: nanadh666
声明:1、本内容转载于网络,版权归原作者所有!2、本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。3、本内容若侵犯到你的版权利益,请联系我们,会尽快给予删除处理!