vue项目接口域名动态的获取方法
181
2023-06-15
滚动条的监听与内容随着滚动条动态加载的实现
实例如下:
body{
background-color: #808080;
}
#main{
margin:0 auto;
width: 960px;
}
#content{
position: absolute;
width: 960px;
}
#img{
margin: 0;
padding: 0;
}
#img li{
list-style-type: none;
background-color: salmon;
margin: 0;
margin-top:10px;
border-bottom: solid 1px hotpink;
text-align: center;
}
//获取列表中的原有内容
var content=document.getElementById("img").innerHTML;
//每被调用一次,就将网页原有内容添加一份,这个大家可以写自己要加载的内容或指令
function addLi(){
document.getElementById("img").innerHTML+=content;
}
/*
* 监听滚动条,本来不想用jQueryhttp://但是发现js里面监听滚动条的事件不好添加,这边就引用了Jquery的$(obj).scroll();这个方法了
*/
$(window).scroll(function(){
//下面这句主要是获取网页的总高度,主要是考虑兼容性所以把Ie支持的documentElement也写了,这个方法至少支持IE8
var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
//clientHeight是网页在浏览器中的可视高度,
var clientHeight=document.body.clientHeight||document.documentElement.clientHeight;
//scrollTop是浏览器滚动条的top位置,
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
//通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容;
if(scrollTop+clientHeight==htmlHeight){
addLi();
}
})
以上这个方法Ie8还有一些主流的浏览器基本都兼容,大家可以尝试下~~
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~