原生JS scroll()、scrollTo()、scrollBy()
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()的更多相关文章
- scroll、scrollBy和 scrollTo三种方法定位滚动条位置
在默认情况下,页面加载完后默认滚动在最顶端,有些时候我们需要在页面打开后,定位滚动条的位置,比如,横向和纵向滚动条居中,实现页面滚动的方法有三种:scroll.scrollBy和 scrollTo,三 ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- 面向对象原生js幻灯片代淡出效果
面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- 移动终端学习2:触屏原生js事件及重力感应
如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...
- 瀑布流的三种实现方式(原生js+jquery+css3)
前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...
- 基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
- 原生js实现 常见的jquery的功能
原生选择器 充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
随机推荐
- 4. SOFAJRaft源码分析— RheaKV初始化做了什么?
前言 由于RheaKV要讲起来篇幅比较长,所以这里分成几个章节来讲,这一章讲一讲RheaKV初始化做了什么? 我们先来给个例子,我们从例子来讲: public static void main(fin ...
- Spring Cloud Alibaba(三)Sentinel之熔断降级
本项目演示如何使用 Sentinel 完成 Spring Cloud 应用的熔断降级调用. Sentinel 是阿里巴巴开源的分布式系统的流量防卫组件,Sentinel 把流量作为切入点,从流量控制, ...
- Mybatis总结之如何自动生成数据库表结构
一般情况下,用Mybatis的时候是先设计表结构再进行实体类以及映射文件编写的,特别是用代码生成器的时候. 但有时候不想用代码生成器,也不想定义表结构,那怎么办? 这个时候就会想到Hibernate, ...
- python的GIL锁
进程:系统运行的一个程序,是系统分配资源的基本单位. 线程:是进程中执行运算的最小单位,是处理机调度的基本单位. 处理机:是计算机中存储程序和数据,并按照程序规定的步骤执行指令的部件.包括中央处理器. ...
- .Net Core实现健康检查
ASP.NET Core 提供运行状况检查中间件和库,以用于报告应用基础结构组件的运行状况. 运行状况检查由应用程序作为 HTTP 终结点公开. 可以为各种实时监视方案配置运行状况检查终结点: 运行状 ...
- spring boot项目启动报错
在eclipse中运行没有任何问题,项目挪到idea之后就报错 Unable to start EmbeddedWebApplicationContext due to miss EmbeddedSe ...
- 【IDEA】IDEA自动生成文档注释的设置方法
Digest:今天和大家分享一下如何使用IntelliJ IDEA快速生成文档注释 IntelliJ IDEA创建自定义文档注释模板 1.打开IntelliJ IDEA,依次点击 File --> ...
- 前端技术之:JS开发几个有意思的东东
一. 查看性能分析报告 npm run build:prod --report 二.vue ui工具 三.vue-element-admin https://panjiachen.gite ...
- F#周报2019年第45期
新闻 邀请博客主们:2019年的F# Advent日历 宣告ML.NET 1.4 .NET Core与Jupyter笔记本 在Jupyter笔记本中使用ML.NET 用于Windows桌面的.NET ...
- 使用Typescript重构axios(十七)——增加axios.create接口
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...