js 获取滚动条位置

JavaScript015

js 获取滚动条位置,第1张

获取滚动条位置：

document.body.scrollTop （滚动条离页面最上方的距离）

document.body.scrollLeft （滚动条离页面最左方的距离）

document.documentElement.scrollTop （滚动条离页面最上方的距离）

document.documentElement.scrollLeft （滚动条离页面最左方的距离）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>无标题页</title>

<script type="text/javascript" src="http://www.suqian.cm/js/ScrollPic.js"></script>

</head>

<body>

<style type="text/css">

.pic_top div{float:left}

.pic_yi{height:80pxwidth:80pxpadding:20px}

</style>

<div class="pic_top">

<div class="pic_left" id="LeftArr" style="height:100pxwidth:200px">鼠标点击向左（left）滚动</div>

<div class="pic_center" id="divAcrollPic1" style=" height:100pxwidth:400pxoverflow:hidden">

<div class="pic_yi">图片</div>

<div class="pic_yi">图片</div>

<div class="pic_yi">图片</div>

<div class="pic_yi">图片</div>

</div>

<div class="pic_right" id="RightArr" style="height:100pxwidth:200px">鼠标点击向右（right）滚动</div>

</div>

<script type="text/javascript">

// 左右点击滚动开始

var scrollPic1 = new ScrollPic()

scrollPic1.scrollContId = "divAcrollPic1"//内容容器ID

scrollPic1.arrLeftId = "LeftArr"//左箭头ID

scrollPic1.arrRightId = "RightArr"//右箭头ID

scrollPic1.frameWidth = 400//显示框宽度

scrollPic1.pageWidth = 100//翻页宽度

scrollPic1.speed = 10//移动速度(单位毫秒，越小越快)

scrollPic1.space = 10//每次移动像素(单位px，越大越快)

scrollPic1.autoPlay = false//自动播放

scrollPic1.autoPlayTime = 3//自动播放间隔时间(秒)

scrollPic1.initialize()//初始化

// 左右点击滚动结束

</script>

</body>

</html>

使用scrollby(x轴,y轴)方法就可以使文档对象滚动到距离浏览器窗口坐标的指定位置上

注意事项

文档对象可以看做是网页所有可见内容的存储容器,网页所有可见内容称为页面

网页x轴坐标与数学一样,但是y轴坐标是相反的,向下是正数,向上是负数

页面移动出去的距离不能和滚动条移动出去的距离对等

滚动条移动出去多少像素才能等达到页面要移动出去的像素是根据整个页面的尺寸比例计算的

这个文档对象移动出去的距离在坐标系上是一定是负数,但是我们要用正数来表示他距离浏览器窗口0,0坐标的距离

这个方法移动的是文档对象和浏览器存储文档对象的窗口0,0位置坐标的距离,绝不是滚动条和文档对象的距离,

移动出去的距离就是文档对象不可见部分内容和浏览器存储文档对象的窗口0,0坐标的距离

这个方法使用scroll命名只是因为文档对象移动出去的距离需要滚动条滚动才能达到效果,便于记忆而已

scrollby()方法是window对象下的方法,document对象及其子对象没有该方法

document对象及其子对象如果要获取或设置元素内部内容滚动出去的距离,请使用scrollTop和scrollLeft, 注意该方法是计算的不可见部分移动出去的内容顶端距离容器的距离是从容器内边距开始计算,而不是边框

使用scrollby()必须存在滚动条,且有一定的高度才能看出方法的效果