文档章节

三种方法实现Javascript控制ScrollBar(滚动条)

kenneth5530
 kenneth5530
发布于 2014/06/29 16:27
字数 358
阅读 52
收藏 0

在Javascript中有三种方法能够控制滚动条的位置,下面我们就分别来看看吧!

       方法一:用scroll函数实现

        scroll(x,y);

        x代表横向滚动条的位置,也就是控制左右位置,当为0时代表最左边,当为document.body.scrollWidth时代表最右边

        y代表纵向滚动条的位置,也就是控制上下位置,当为0时代表最上面,当为document.body.scrollHeight时代表最下面

       方法二:用scrollBy函数实现

        scrollBy(x,y);

        x和y代表的意思和第一个方法一样;-)

       方法三:用scrollTo函数实现

        scrollTo(x,y);

        x和y代表的意思和第一个方法一样;-)

        另外顺便说一句,如果你是在框架(Frame)中要控制父框架的滚动条,那么要记得在函数前加parent,举个例子来说就是parent.scroll(0,0);

 

用Javascript控制ScrollBar(滚动条)

以下都是默认自动滚动到底部,需要滚动到顶部只需将document.body.scrollHeight换为0.

方法一:用scroll方法实现

<body onload="scroll(0,document.body.scrollHeight) ">   <script>   document.write(new Array(100).join("<br>"))   </script>

方法二:用scrollBy方法实现

<body onload="scrollBy(0,document.body.scrollHeight) ">   <script>   document.write(new Array(100).join("<br>"))   </script>

方法三:用scrollTo方法实现

<body onload="scrollTo(0,document.body.scrollHeight)">   <script>   document.write(new Array(100).join("<br>"))   </script>

如果是在框架中,需要控制框架的ScrollBar,那么要加parent,例如parent.scrollTo(0,0);


本文转载自:http://fluagen.blog.51cto.com/146595/405607

共有 人打赏支持
kenneth5530
粉丝 1
博文 18
码字总数 6639
作品 0
成都
程序员
私信 提问
nodejs中web请求乱码

原网页 今天在写代码通过nodejs中http的get获取数据的时候中文有时候会是乱码 看nodejs文档中的示例代码也是这样写 let rawData = ''; res.on('data', (chunk) => rawData += chunk); res.o...

hongyi1159
2017/04/13
0
0
超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

日期:2013-2-16 来源:GBin1.com 在线演示 可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案。 这个滚动条...

gbin1
2013/02/18
6
0
超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

日期:2013-2-16 来源:GBin1.com 在线演示 可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案。 这个滚动条...

gbin1
2013/02/17
1K
0
Android WebView 与JS的数据交互

关于WebView 我们知道目前android市场上的一些应用采用的开发方式大致分为三种:Native App、Web App、Hybrid App。本文主要是Hybrid App中实现的主要技术native组件与js的数据交互的理解以及...

习惯_搬砖
2015/05/06
0
0
如何自定义CSS滚动条的样式?

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵...

腾讯云加社区
11/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring源码学习笔记-1-Resource

打算补下基础,学习下Spring源码,参考书籍是《Spring源码深度解析》,使用版本是Spring 3.2.x,本来想试图用脑图记录的,发现代码部分不好贴,还是作罢,这里只大略记录下想法,不写太细了 ...

zypy333
今天
10
0
RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
16
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
10
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部