scroll、scrollBy和 scrollTo三种方法定位滚动条位置
2015-09-12 21:43
330 查看
在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll、scrollBy和 scrollTo,三个方法都带两个参数:x(X轴上的偏移量)和y(Y轴上的偏移量)。因此我们只需修改x,y的偏移量来设置滚动条的位置。另外,页面的滚动高度必须在网页加载完成后才能获取到,所以触发事件用onload。
方法一:用scroll方法实现滚动条位于最底端。
方法二:用scrollBy方法实现滚动条位于最右端。
方法三:用scrollTo方法实现水平滚动条和纵向滚动条均居中。
虽然使用scroll、scrollBy和scrollTo方法的效果一样,但是彼此之间还是有一些区别的。 经测试如果使用某一确定的位置参数时,不需要带单位,例据顶端300像素:
方法一:用scroll方法实现滚动条位于最底端。
<body onload="scroll(0,document.body.scrollHeight) ">
方法二:用scrollBy方法实现滚动条位于最右端。
<body onload="scrollBy(document.body.scrollWidth,0) ">
方法三:用scrollTo方法实现水平滚动条和纵向滚动条均居中。
<body onload="scrollTo(document.body.scrollWidth/2,document.body.scrollHeight/2)">
虽然使用scroll、scrollBy和scrollTo方法的效果一样,但是彼此之间还是有一些区别的。 经测试如果使用某一确定的位置参数时,不需要带单位,例据顶端300像素:
<body onload="scroll(0,300) ">
相关文章推荐
- 美团的笔试题中的一种大数除法的方法
- Android 动画深入分析
- 用eclipse做的一个短信发送器,编译通过但是部署到模拟器上面出错
- SCOI2009 windy数
- HDU 5432 BC - Pyramid Split(二分 + 模拟)
- i++ i-- 问题小记
- 2015-09-09 [一点资讯]--数据抓取和处理工程师--5面
- 1.Objective-C基础学习
- Jq将页面值传至模态框的用法
- 网络性能测试工具iperf详细使用图文教程
- php添加mysql扩展
- 11.tftp和nfs服务器
- 窗口-CCF测试往届题
- 如何在Android模拟器上安装apk文件
- Hadoop/spark安装实战(系列篇3) Hadoop 伪分布模式安装
- 一个简单的jsp+servlet实例,实现简单的登录
- java练习:打印 数字1、2、3、4的组合,不能以4开头,1和3不能相邻,且数字不能重复
- shell script
- [vb.net]最简单的邮件发送
- php环境的搭建