在项目实践中,有些页面展示是需要根据浏览器滚动条的变化而移动的,比如信息数据显示一直居中等。
以数据展示一直位于浏览器页面居中为例,需要考虑的两个因素:
一、滚动条滚动事件的箭筒
需要注意的是,监听事件绑定的位置
//此方法在浏览器控制台就可以查看,绑定的是浏览器窗口
window.onresize = function(){
console.log(2222);
}
但是项目中的话,就需要绑定某个DIV,这样才能生效,以下为例
$("#div").scroll(()=>{
//内部逻辑
});
二、获取滚动条 滚动的高度
首先,我们可以在页面的最外层DIV 定义一个id,用于获取高度,根据获取的offset().top来查看滚动条滚动的高度。
const hei = $("#kdvContainer").offset().top;
注意:hei 这个参数,可能为正值,也可能为负值,需要根据实际页面高度来进行做出相对应的逻辑,也可以根据需要控制的DIV高度和它的父节点的来进行控制
下面是我项目中的代码,只复制了部分,可以参考方法,具体逻辑根据需求实现。
//90 为id 的原始高度
$("#"+id).offset().top + 90 - $("#"+id).parent().offset().top
有使用到的可以参考!