Last active
December 16, 2015 08:09
-
-
Save manxisuo/5403701 to your computer and use it in GitHub Desktop.
关于HTML滚动条>>
1. 判断垂直滚动条是否已到底部(或顶部)
2. 判断页面是否存在滚动条
3. 缓慢滚动到页面底部
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 判断垂直滚动条是否已到底部(或顶部) | |
// 前提1. 要给页面设置DOCTYPE例如<!DOCTYPE html>,直接用<!DOCTYPE>不可以。 | |
// 前提2. body的margin-top和margin-bottom设为0 | |
// 这个是判断垂直滚动条的。判断水平滚动条的也类似。 | |
// 检查垂直滚动条是否已经到底 | |
function isScrollerBottom() { | |
var winH = $(window).height(); | |
var pageH = $(document.body).height(); | |
var scrollT = $(window).scrollTop(); | |
if(scrollT == pageH - winH) { | |
return true; | |
} | |
else { | |
return false; | |
} | |
} | |
// 检查垂直滚动条是否已经到底 | |
function isScrollerTop() { | |
var scrollT = $(window).scrollTop(); | |
if(scrollT == 0) { | |
return true; | |
} | |
else { | |
return false; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 判断页面是否存在滚动条 | |
// 前提1. 要给页面设置DOCTYPE例如<!DOCTYPE html>,直接用<!DOCTYPE>不可以。 | |
// 前提2. body的margin-left和margin-right设为0(第一个函数); body的margin-top和margin-bottom设为0(第二个函数) | |
function hasVerticalScroller() { | |
return (document.documentElement.clientHeight < document.body.offsetHeight); | |
} | |
function hasHorizontalScroller() { | |
return (document.documentElement.clientWidth < document.body.offsetWidth); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 缓慢滚动到页面底部 | |
// 滚动到顶部的类似,将window.scrollBy(0, 10);中的10改为-10即可。另外,水平滚动的也一样。 | |
function scrollToBottom() { | |
clearInterval(timer); | |
var scrollT = $(window).scrollTop(); | |
timer = setInterval(function (){ | |
window.scrollBy(0, 10); | |
var curScrollT = $(window).scrollTop(); | |
if ($(window).scrollTop() == scrollT)clearInterval(timer); | |
scrollT = curScrollT; | |
}, 10); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment