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. JVM(2) Java内存溢出异常

    在Java虚拟机运行时数据区中,除了程序计数器之外,虚拟机栈.本地方法栈.方法区和Java堆都有发生OutOfMemoryError(简称OOM)异常的可能. 一.Java堆溢出 Java堆用于存储对 ...

  2. MySQL基础篇（3）常用函数和运算符

    一.字符串函数(索引位置都从1开始) CONCAT(S1,S2,...Sn): 连接S1,S2,...Sn为一个字符串,任何字符串与NULL进行连接的结果都是NULL INSERT(str,x,y,i ...

  3. 【ASP.NET Core学习】Razor页面

    准备工作 初始化空的项目(终端输入:dotnet new web -n=Razor) Nuget添加Microsoft.EntityFrameworkCore.SqlServer 和 Microsof ...

  4. C#开发命令执行驱动程序 之 控制标志的命令行参数

    /// <summary> /// 在cmd窗体内执行如下: /// CtrlOrderDrierApp.exe -f -t /// 返回: /// FOO /// Show Table ...

  5. Flask：Flask-script插件

    Flask-Script插件扩展提供向Flask插入外部脚本的功能,包括一个开发用的服务器,一个定制的python shell,设置数据库的脚本,cronjobs,及其它运行在web应用之外的命令行任 ...

  6. C++学习笔记7_多态

    1. 类与类之间的关系class A{ public: int a; void funcA() {}}包含: class B { public: void funcB(){} A a; }//如果类B ...

  7. Linux下修改文件权限,所有权

    Linux与Unix是多用户操作系统,所以文件的权限与所有权的实现就显得很有必要:每个文件主要与三组权限打交道,分别是用户(user),用户组(group),其他用户(other) 用户(u)是文件的 ...

  8. C函数库ctype.h概况

    1 字符测试函数 1> 函数原型均为int isxxxx(int) 2> 参数为int, 任何实参均被提升成整型 3> 只能正确处理处于[0, 127]之间的值 2 字符映射函数 1 ...

  9. [考试反思]0908NOIP模拟测试40：颠簸

    怎么说呢?好像也没什么可说的. 把我的优缺点都表现出来了的一场考试. T3是个小的dp想出来就能打,打出来就能A.我上来过了一遍题目觉得T3最简单(然而也并不是很简单) 然后就开始打,交,其实已经A了 ...

  10. 朋友的一年工作经验跳槽字节跳动社招经历分享(已拿offer)

    虽然已经临近年末,但是还是萌生要看新机会的想法,主要的原因是觉得在目前的岗位上技术增长遇到的瓶颈,因此想去做一些更有挑战的工作.因为仍然准备继续在深圳工作,因此选定了三家公司,腾讯.字节跳动和 sho ...