scroll()  此方法接收两个参数,依次为X坐标和Y坐标;设置滚动条的偏移位置

scrollTo() 此方法和scroll()作用一样,都是设置滚动条的偏移位置。

scrollBy() 此法发同样接收两个参数,不过参数分别为X轴的偏移量和Y轴的偏移量,并且可以增加或者减少。

scroll()例子: scroll(0, 200)  ==>  设置滚动条Y轴位置在200像素的地方。比如:当前坐标为0,执行后便是200,当前坐标为100,执行后是200。

scrollTo()例子: scrollTo(0, 200) ==> 同scroll()方法,设置Y轴在200像素的位置。

scrollBy()例子:scrollBy(0, 200) ==> 使得滚动条Y轴的位置,在当前的基础上增加200。比如:当前Y轴位置为0,执行后便是200;当前为100,执行后便是300。

体现scrollTo()和scrollBy()方法区别的例子:  setInterval(function() { scrollBy(0, 20) }, 200)

原生JS scroll()、scrollTo()、scrollBy()的更多相关文章

  1. scroll、scrollBy和 scrollTo三种方法定位滚动条位置

    在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll.scrollBy和 scrollTo,三 ...

  2. html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

    在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...

  3. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  4. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  5. 移动终端学习2:触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  6. 瀑布流的三种实现方式(原生js+jquery+css3)

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  7. 基于原生js的图片延迟加载

    当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...

  8. 原生js实现 常见的jquery的功能

    原生选择器   充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...

  9. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

随机推荐

  1. Robot Framework——对时间操作的datetime库常用关键字

    1.对固定日期进行操作,增加或减去单位时间或者时间段 2.对两个时间段进行操作 3.对时间格式转化,获取时间戳 4.从完整时间中取指定年月日等 5.对时间类型进行格式化 6.获取当前时间或者指定时区时 ...

  2. 【Windows删除指定后缀文件cmd命令】

    如果我想删除指定目录下的"*.mp4"后缀文件 在命令行中,进入指定目录,输入 del [/q] "*.mp4" del 命令是删除文件cmd(命令行)命令. ...

  3. Django学习day2——Django安装与环境配置

    安装 Django 文章中python版本为3.65 这里以windows7为例,在pip目录下运行pip install Django就能安装django最新版本(本文为django2.2版本) 也 ...

  4. Docker的centos7容器中如何安装mongodb

    下载安装包: wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.12.tgz 解压安装包 tar -zxvf mongodb ...

  5. 【IOS开发学习—OC篇】

    一.instancetype和id关键字的区别 1)instancetype表示方法的返回类型和调用方法的对象类型相同. 2)在Object-C引入instancetype之前,初始化方法的返回类型都 ...

  6. elastalter邮件告警

    一:简介 ElastAlert是一个简单的框架,用于通过Elasticsearch中的数据异常警告,峰值或其他感兴趣的模式. 监控类型 "匹配Y时间内有X个事件的地方"(frequ ...

  7. centos中网卡的配置

    配置临时IP: ip a a 192.168.59.100/24 dev ens32 ifconfig ens32 192.168.59.100 up 在Linux最小安装之后,一般需要手动配置网络地 ...

  8. 009.Kubernetes二进制部署kube-apiserver

    一 部署master节点 1.1 master节点服务 kubernetes master 节点运行如下组件: kube-apiserver kube-scheduler kube-controlle ...

  9. 201871010114-李岩松《面向对象程序设计(java)》第七周学习总结

    项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...

  10. 今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的解决了这个问题。

    今天做一个项目的时候,要在一个编辑的jsp页面的textarea标签设置value属性,结果发现他没有value属性,但是是编辑页面又必须要回显要修改的内容,所以在参考了w3cschool之后很轻松的 ...