文档章节

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

kenneth5530
 kenneth5530
发布于 2014/06/29 16:27
字数 358
阅读 29
收藏 0
点赞 0
评论 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);


© 著作权归作者所有

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

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

hongyi1159 ⋅ 2017/04/13 ⋅ 0

让DIV的滚动条自动滚动到最底部 - 4种方法

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

晨曦之光 ⋅ 2012/03/09 ⋅ 0

使用Kotlin:让Android与JS交互的详解

先来说说什么是JS交互: 说的俗一点就是通过我们项目中的控件来调用HTML里的JS代码,也可以通过JS来调用项目中的代码。 Android与JS之间的桥梁就是WebView了,我们是通过WebView来实现他们的...

富江___ ⋅ 06/11 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

Lynx技术分析-JS引擎扩展设计

JS Binding 技术 Lynx(一个高效的跨平台框架) 的 JS Binding 技术最主要的目的是搭建一个高效的与 JS 引擎解耦的通信桥梁,同时具备 JS 引擎切换的能力。该技术经历了多次迭代,最终通过抽...

hxxft ⋅ 05/15 ⋅ 0

JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo ⋅ 04/23 ⋅ 0

艾润物联/vehicle-keyboard-android

停车王车牌号码专用键盘 VehicleKeyboard - Android 是停车王品牌的各端产品线的基础组件,专为提高中国车牌号码输入速度而定制开发的专用键盘组件,包括以下三个项目: Android项目,为And...

艾润物联 ⋅ 04/24 ⋅ 0

JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster ⋅ 05/29 ⋅ 0

thinkPHP实现瀑布流的方法

thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 过期已备案域名,注册就能用!终身VIP会员,畅享源码下载织梦精美仿站,火热预定中! 本文实例讲述了thinkPHP实现瀑布流的方法。分享给大...

thinkyoung ⋅ 2015/10/10 ⋅ 0

JavaScript开发区块链只需200行代码

JavaScript开发一个简单的区块链只需200行代码。通过JavaScript的开发实现过程,你将理解区块链是什么:区块链就是一个分布式数据库,存储结构是一个不断增长的链表,链表中包含着许多有序的...

hahajin ⋅ 05/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud相关项目

Spring Cloud Config 配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储、Git以及Subversion。 Spring Cloud Bus 事件、消息总线,用于在集群(例如,配...

明理萝 ⋅ 30分钟前 ⋅ 1

更新队友POM文件后报错

打开报错的地方的pom及其引用方法所在文件的pom,观察其版本号是否一致,不一致进行更改

森火 ⋅ 35分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 40分钟前 ⋅ 0

Succinct Data Structure

作者:唐刘 最近看了一篇论文 SuRF: Practical Range Query Filtering with Fast Succinct Tries,里面提到使用一种新的数据结构 Succinct Range Filter(SuRF) 替换掉了 RocksDB 默认的 Bloo...

TiDB ⋅ 41分钟前 ⋅ 0

Java进阶之内存模型介绍

Java进阶之内存模型介绍 前言 不管在什么编程语言里面,读取和写入都是我们程序最普遍的操作,在单线程的程序里面我们可能不关注线程的读写问题,但是一旦到多线程的环境下,读和写就会变得非...

九劫散仙 ⋅ 43分钟前 ⋅ 0

在windows上搭建一个ftp服务器

一、关于ftp FTP 是File Transfer Protocol的英文简称,而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时,它也是一个应用程序。基于不同的操作系统有不同的FTP应用程序...

zctzl ⋅ 47分钟前 ⋅ 0

JDK8 排序

import java.util.Collections;import java.util.List;import java.util.ArrayList;import java.util.Comparator; public class JavaTest { public static void main(String......

Jeam_ ⋅ 57分钟前 ⋅ 0

api管理平台汇总

swagger crapApi RAP xxl-api apidoc

facula ⋅ 57分钟前 ⋅ 0

Java 11 快要来了,编译 & 运行一个命令搞定!

Java 11 马上要来了,原定于 9 月发布,还有不到 3 个月了,敬请期待更多新功能被加入到 11 当中,本文本讲的是 JEP 330 这个新特性。 化繁为简,一个命令编译运行源代码 看下面的代码。 //...

Java技术栈 ⋅ 今天 ⋅ 0

谷歌运营了一年多的无人出租车,得出了四条宝贵的经验

简评:并不是谷歌运营,不过国内对 Waymo 不敏感,就标题党了一下请多谅解。另外网友对于无人出租车是认可的,但是觉得如果价格没有优势,还是回去乘坐人类驾驶的汽车,毕竟这是人家的经济来...

极光推送 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部