Skip to content

Instantly share code, notes, and snippets.

@manxisuo
Last active December 16, 2015 08:09
Show Gist options
  • Save manxisuo/5403701 to your computer and use it in GitHub Desktop.
Save manxisuo/5403701 to your computer and use it in GitHub Desktop.
关于HTML滚动条>> 1. 判断垂直滚动条是否已到底部(或顶部) 2. 判断页面是否存在滚动条 3. 缓慢滚动到页面底部
// 判断垂直滚动条是否已到底部(或顶部)
// 前提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;
}
}
// 判断页面是否存在滚动条
// 前提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);
}
// 缓慢滚动到页面底部
// 滚动到顶部的类似,将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