文档章节

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

kenneth5530
 kenneth5530
发布于 2014/06/29 16:27
字数 358
阅读 41
收藏 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
成都
程序员
让DIV的滚动条自动滚动到最底部 - 4种方法

要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息。 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制D...

晨曦之光
2012/03/09
0
0
nodejs中web请求乱码

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

hongyi1159
2017/04/13
0
0
Android WebView 与JS的数据交互

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

习惯_搬砖
2015/05/06
0
0
HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好。一些重量级的JS组件库也都有这...

李玉珏
2015/04/23
0
0
JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 浏览器对象模型 (Browser Object Model) 尚无正式标准。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法...

一生只为虞美人
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

解析高可用分布式键值存储 etcd 的原理

这篇文章将会介绍 etcd 的实现原理,其中包括 Raft 协议、存储两大模块,在最后我们也会简单介绍 etcd 一些具体应用场景。 etcd 的官方将它定位成一个可信赖的分布式键值存储服务,它能够为整...

小刀爱编程
24分钟前
2
0
在ubuntun虚拟机里安装goLang语言编程环境

Go语言是谷歌2009发布的第二款开源编程语言。 Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全、支持并行进程。 北京时间201...

JerryWang_SAP
24分钟前
6
0
c++builder导出函数export function DLL

__stdcall __export 即可,如: ulong __stdcall __export od_disasm(char *src,ulong srcsize,ulong srcip, t_disasm *disasm,int disasmmode){ return Disasm(src,srcsiz......

simpower
26分钟前
2
0
KDC服务安装及配置

阿伦哥-
29分钟前
2
0
mybatis-plus公共字段操作以及springboot2整合mybatis-plus

1、公共实体 对于User类中有而user表中没有的属性需要加第二个注解@TableField(exist = false),表示排除User类中的属性 所有新增公共字段加注解 并指定 @TableField(value = "corp_code",fi...

glen_xu
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部