基本使用
/*
参数：
top : 原始比对高度
below : 低于原始比对高度回调
above : 高于原始比对高度回调
report : 实时汇报高度
*/
function CompareScroll(args){ //滚动条监控
if(!window.addEventListener){ alert("you can go") }
var compareTop = args.top || false;
var canTouch = "ontouchend" in document;
var delay = args.delay || 50;
var above = args.above || null;
var below = args.below || null;
var report = args.report || null;
var timer;
this.init = function(){
_bindEvent();
_timeScroll();
return this;
}
this.remove = function(){
_unbindEVent();
}
function _bindEvent(){
if(canTouch){
window.addEventListener("touchmove", _scroll , false);
window.addEventListener("touchend", _timeScroll , false);
}else{ //如果不支持touch事件
window.addEventListener("scroll", _scroll , false);
}
}
function _unbindEVent(){
if(canTouch){
window.removeEventListener("touchmove", _scroll , false);
window.removeEventListener("touchend", _timeScroll , false);
}else{ //如果不支持touch事件
window.removeEventListener("scroll", _scroll , false);
}
}
function _scrollTo(){
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}
function _timeScroll(){
var iniTop = _scrollTo();
timer = setTimeout(function(){
_calculateTop(_scrollTo());
if(iniTop != _scrollTo()){
_timeScroll();
}
}, delay);
}
function _scroll(){
clearTimeout(timer);
_scroll.ID && clearTimeout(_scroll.ID);
_scroll.ID = setTimeout(function(){
_calculateTop(_scrollTo());
}, delay);
}
function _calculateTop(top){
if(compareTop){
if(top >= compareTop){
above && above(top);
}else{
below && below(top);
}
}
report && report(top);
}
}
new CompareScroll({
top : 70,
below : function(){
console.log("当前高度低于:"+70);
},
above : function(){
console.log("当前高度超过了:"+70);
},
report : function(top){
console.log("当前高度:"+top);
}
}).init();
一个页面实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>Easonyu的监听手机滚动条的例子</title>
<link rel="shortcut icon" href="/themes/default/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:image" content="http://aresfield.com/uploads/201802/17cf7aecb46edc6d524c878f75ab2aa2.jpg">
</head>
<body>
<style type="text/css">
.list li { height: 200px; }
</style>
<div class="menu" id="menu">
<div style="width: 60px; height: 100%;">
<a href="http://m.aresfield.com/" class="logo" style="display: flex; align-items: center; justify-content: center; height: 100%">logo</a>
</div>
<a href="#team" class="team"><i>团队活动</i></a>
<a href="#team2" class="team"><i>商务合作</i></a>
<a href="#team3" class="team"><i>教练团队</i></a>
</div>
<div class="list">
<ul id="team">
<li>
<a href="https://mp.weixin.qq.com/s/QHPr_oBOiv2olvIOaXZtaw">
<p>团队活动</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/MLrbX5cefjiQY12hoG0C9w">
<p>团队活动</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/7AtJ12wz1XWUiNnFe3HrPw">
<p>团队活动</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/qEWbKw3r1cF6m0xe5-BPDg">
<p>团队活动</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/9KoawBG_P-B-zdma5eFDow">
<p>团队活动</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/nQvWxrkIlvk66TZwMeHpzA">
<p>团队活动</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
<p>团队活动</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
<p>团队活动</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
<p>团队活动</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
<p>团队活动</p>
</a>
</li>
</ul>
<ul id="team2">
<li>
<a href="https://mp.weixin.qq.com/s/QHPr_oBOiv2olvIOaXZtaw">
<p>商务</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/MLrbX5cefjiQY12hoG0C9w">
<p>商务</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/7AtJ12wz1XWUiNnFe3HrPw">
<p>商务</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/qEWbKw3r1cF6m0xe5-BPDg">
<p>商务</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/9KoawBG_P-B-zdma5eFDow">
<p>商务</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/nQvWxrkIlvk66TZwMeHpzA">
<p>商务</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
<p>商务</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
<p>商务</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
<p>商务</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
<p>商务</p>
</a>
</li>
</ul>
<ul id="team3">
<li>
<a href="https://mp.weixin.qq.com/s/QHPr_oBOiv2olvIOaXZtaw">
<p>教练</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/MLrbX5cefjiQY12hoG0C9w">
<p>教练</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/7AtJ12wz1XWUiNnFe3HrPw">
<p>教练</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/qEWbKw3r1cF6m0xe5-BPDg">
<p>教练</p>
</a>
</li>
<li>
<a href="https://mp.weixin.qq.com/s/9KoawBG_P-B-zdma5eFDow">
<p>教练</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/nQvWxrkIlvk66TZwMeHpzA">
<p>教练</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
<p>教练</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
<p>教练</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
<p>教练</p>
</a>
</li>
<li>
<a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
<p>教练</p>
</a>
</li>
</ul>
</div>
</body>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { background: #111; }
body.active { padding-top: 60px; }
body.active .menu { position: fixed; top: 0; left: 0; }
.menu a.logo { width: 100%; display: block; height: 100%; background-size: auto 70px; }
.menu { height: 60px; display: table; letter-spacing: 2px; text-align: center; box-sizing: border-box; background: #fff; width: 100%; padding-right: 90px; position: relative; }
.menu a { text-decoration: none; box-sizing: border-box; height: 60px; }
.menu a.current { color: red; font-weight: bold; }
.menu a i { width: 40px; display: inline-block; font-style:normal; }
.menu .contact { width: 90px; font-family: arial; height: 60px; padding: 0; padding-top: 12px; box-sizing: border-box; word-break: break-all; display: block; right: 0; top: 0; position: absolute; background: #d07256; color: #fff; font-size: 14px; text-align: center; }
.menu .contact span { font-size: 12px; display: inline-block; padding-top: 4px; letter-spacing: 0.5px }
.menu a { height: 60px; font-size: 16px; padding:0 15px; text-align: left; color: #333; display: table-cell; vertical-align: middle; }
.list { padding:20px; }
.list ul { overflow:auto; }
.list li { float: left; width: 50%; text-align: center; color: #fff; list-style: none; margin-bottom: 16px; }
.list li a { color: #fff; text-decoration: none; }
.list li img { width: 40vw; height: 26vw; object-fit: cover; }
.list li p { padding:0 4vw; font-size: 14px; line-height: 1.5; text-align: left; height: 63px; text-align: justify; overflow: hidden; }
</style>
<script type="text/javascript">
var positionInfo = [];
window.onload = function(){
var a_list = document.querySelectorAll("#menu .team");
var a_len = a_list.length;
for(var i = a_len - 1; i > -1; i--){
var id = a_list[i].getAttribute("href");
positionInfo.push({
id : id,
linker : a_list[i],
top : getPositionTop(document.querySelector(id)) - 80
});
}
}
function getPositionTop(node) {
var top = node.offsetTop;
var parent = node.offsetParent;
while(parent != null) {
top += parent.offsetTop;
parent = parent.offsetParent;
}
return top;
}
function CompareScroll(args){ //滚动条监控
if(!window.addEventListener){ alert("you can go") }
var compareTop = args.top || false;
var canTouch = "ontouchend" in document;
var delay = args.delay || 50;
var above = args.above || null;
var below = args.below || null;
var report = args.report || null;
var timer;
this.init = function(){
_bindEvent();
_timeScroll();
return this;
}
this.remove = function(){
_unbindEVent();
}
function _bindEvent(){
if(canTouch){
window.addEventListener("touchmove", _scroll , false);
window.addEventListener("touchend", _timeScroll , false);
}else{ //如果不支持touch事件
window.addEventListener("scroll", _scroll , false);
}
}
function _unbindEVent(){
if(canTouch){
window.removeEventListener("touchmove", _scroll , false);
window.removeEventListener("touchend", _timeScroll , false);
}else{ //如果不支持touch事件
window.removeEventListener("scroll", _scroll , false);
}
}
function _scrollTo(){
return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}
function _timeScroll(){
var iniTop = _scrollTo();
timer = setTimeout(function(){
_calculateTop(_scrollTo());
if(iniTop != _scrollTo()){
_timeScroll();
}
}, delay);
}
function _scroll(){
clearTimeout(timer);
_scroll.ID && clearTimeout(_scroll.ID);
_scroll.ID = setTimeout(function(){
_calculateTop(_scrollTo());
}, delay);
}
function _calculateTop(top){
if(compareTop){
if(top >= compareTop){
above && above(top);
}else{
below && below(top);
}
}
report && report(top);
}
}
new CompareScroll({
top : 70,
below : function(){
document.body.className = "";
},
above : function(){
document.body.className = "active";
},
report : function(top){
var topBreak = false;
for(var i = 0; i < positionInfo.length; i++){
if(positionInfo[i].top <= top && !topBreak){
positionInfo[i].linker.className = "current";
topBreak = true;
}else{
positionInfo[i].linker.className = "";
}
}
}
}).init();
</script>
</html>
特性：
1.解决了ios触碰之后滑动过程不能实时获取滚动条高度的痛点
2.兼容pc跟手机端
网友评论