<!DOCTYPE
html>
<
html lang="en">
<
head>
<
meta charset="UTF-8">
<
title>
Title</
title>
<
style>
*{
padding:
0;
margin:
0;
box-sizing:
border-box;
}
#d1{
background:
#ccc;
height:
200px;
overflow-x:
hidden;
overflow-y:
auto;
}
#d11{
background:
green;
height:
1000px;
}
#d2{
background:
#f7f7f7;
height:
200px;
overflow-x:
hidden;
overflow-y:
auto;
}
#d22{
background:
red;
height:
1000px;
}
#d3{
background:
#999;
height:
200px;
}
#d4{
background:
#aaa;
height:
200px;
}
#box{
position:
relative;
}
#box0{
background:
#eee;
height:
260px;
}
#p-box{
position:
relative;
}
#p-box button{
position:
absolute;
right:
0;
top:
0;
}
#p-box p{
height:
50px;
background:
#ccc;
border:
1px solid #fff;
}
</
style>
</
head>
<
body>
<
div id="box0">
box0</
div>
<
div id="box">
<
div id="d1">
<
div id="d11"></
div>
</
div>
<
div id="d2">
<
div id="d22"></
div>
</
div>
<
div id="d3">
3</
div>
<
div id="d4">
4</
div>
</
div>
<
div id="p-box">
<
button id="btn">
添加</
button>
<
p></
p>
<
p></
p>
<
p></
p>
<
p></
p>
</
div>
<
script src="http://code.jquery.com/jquery-1.9.1.js"></
script>
<
script>
var d1 = document.
getElementById(
'd1');
var d2 = document.
getElementById(
'd2')
$(
function () {
})
var h;
window.
onscroll = function(){
h = document.documentElement.scrollTop
|| document.body.scrollTop;
console.
log(
h);
}
/*setInterval(function () {
console.log('h'+h);
},500)*/
/*节流函数*/ /*、一定时间内业务代码只执行一次,此处1秒内只打印一次0*/
var canRun = true;
document.
getElementById(
"d1").
onscroll = function(){
if(
!canRun){
console.
log(
"!canRun");
// 判断是否已空闲，如果在执行中，则直接return
return;
}
canRun = false;
setTimeout(
function(){
console.
log(
0);
//真正要执行的业务代码
canRun = true;
},
1000);
};
// 函数防抖 /*、频繁出的情况下,一定的空闲时间才去执行一次业务代码,此处3秒不滚动滚动条才打印1*/
var timer = false;
document.
getElementById(
"d2").
onscroll = function(){
clearTimeout(
timer);
// 清除未执行的代码，重置回初始化状态
timer = setTimeout(
function(){
console.
log(
1);
//真正要执行的业务代码
},
3000);
};
$(
"#btn").
on(
"click",
function () {
var p
= "<p></p>";
$(
"#p-box").
append(p);
console.
log(
h);
h+=50;
$(
'html,body').
animate({
scrollTop
: h
},
200)
})
$(
"#p-box").
on(
"click",
"p",
function () {
console.
log(
101);
console.
log(
h);
var _this
= $(
this);
_this.
remove();
h-=50;
console.
log(
h);
})
</
script>
</
body>
</
html>
转载请注明原文地址: https://ju.6miu.com/read-19435.html
