js中scroll滚动入门知识_滚动菜鸟教程下载

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。一.元素相关属性/方法解释element.scrollHeight返回元素的整体高度。element.scrollWidth返回元素的整体宽度。element.scrollLeft返回元素左边缘与视图之间的距离。element.scrollTop返回元素上边缘与视图之间的距离。这四个属性,全部是只读

js中scroll滚动入门知识

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。

js中scroll滚动入门知识_滚动菜鸟教程下载

一.元素相关

属性/方法解释
element.scrollHeight返回元素的整体高度。
element.scrollWidth返回元素的整体宽度。
element.scrollLeft返回元素左边缘与视图之间的距离。
element.scrollTop返回元素上边缘与视图之间的距离。

这四个属性,全部是只读属性

其中,无非就是分为宽高和左上。
两个方向。

1.scrollHeight 和 scrollWidth

  • 使用scrollHeight和scrollWidth属性返回元素的高度,单位为px,包括padding
  • scrollHeight 和 scrollWidth返回的数值是包括当前不可见部分的。
  • scrollHeight 和 scrollWidth 属性为只读属性

2.scrollLeft 和 scrollTop

  • 需要一个监听方法
  • 还存在浏览器兼容问题

二.窗口相关

1.window对象的scrollBy() 和scrollTo()

1.scrollBy(x,y)

scrollBy(x,y)方法滚动当前window中显示的文档,x和y指定滚动的相对量。

scrollBy(0, 200) ==> 使得滚动条Y轴的位置,在当前的基础上增加200。比如:当前Y轴位置为0,执行后便是200;当前为100,执行后便是300。要使此方法工作 window 滚动条的可见属性必须设置为true!

2.scrollTo(x,y)

scrollTo(xpos,ypos)

scrollTo(x,y)方法:滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的

海计划公众号
(0)
上一篇 2020/03/24 05:41
下一篇 2020/03/24 05:41

您可能感兴趣的内容

  • single-spa基础入门_于前端微服务化的JavaScript前端解决方案

    single-spa基础入门 官方网址:https://single-spa.js.org/ GitHub:https://github.com/CanopyTax/single-…

    2020/03/11
  • 通过 41 个 问答方式快速了解学习 Git小白常识_git指南教程

    1. 你最喜欢的 Git 命令是什么个人比较喜欢 git add -p. 这增加了“补丁模式”的变化,这是一个内置的命令行程序。它遍历了每个更改,并要求确认是否要执行它们。这个命令迫使咱们放慢速度并检查更改文件。作为开发人员,咱们有时常常急于提交,我自己也经常这样,做完运行 git add . 才发现把调试的代码也提交上去了。2. 为什么你更喜欢直接使用 g

    2020/03/23
  • webpackmonitor小白帮助_开发过程中监控webpack优化指标

    webpackmonitor小白帮助 官方网址:http://webpackmonitor.com GitHub:https://github.com/webpackmonitor…

    2020/03/11
  • 网站web前端常见的优化措施使用帮助_优化使用攻略

    一般网站优化都是优化后台,如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下,对前端web优化也是非常重要的。下面说说几种常见的优化措施。1、HTML CSS JS位置一般需要将CSS放页面最上面,即HEAD部分,而将JS代码放页面底部。因为页面需要加载为CSS才进行渲染,而JS如果不是在页面加载之前就要执行就要放到页面最底部,以免在

    2020/03/29
  • https为什么能保证安全性使用说明_https指南攻略

    http传输如下:此时信息是明文传输,如果信息被人截获,则能看到里面的内容,极不安全那就需要对内容加密,过程如下:浏览器生成一个秘钥浏览器向服务器请求公钥服务器向浏览器发送它的公钥浏览器接收服务器发送的公钥,并使用公钥加密随机生成的对称密钥,发送给服务器服务器接收浏览器发送的数据,用自身私钥,得到对称加密密钥最后,浏览器和服务器可以使用对称密钥加密内容进行通

    2020/03/22
  • 关于Mock.js使用基础教程_数据教程视频

    关于Mock.js使用基础教程 目前在做一个个人网站,写了一半没有数据填充,也不知道写啥了,就顺带学习下mockjs这个东西,官网上主要介绍它是一个可以随机生成各种类型数据,拦截a…

    2020/03/20
  • i黑马小白教程_创业创新服务平台

    i黑马小白教程 官方网址:http://www.iheima.com/ 简介描述:创业创新服务平台 i黑马是面向创业者的创新型综合服务平台,掌握创业创新领域强有力话语权的媒体矩阵,…

    2020/03/06
  • css样式的继承性、层叠性 、优先级菜鸟教程下载_样式入门基础教程

    一、css样式的继承性:作用:给父元素设置一些属性,子元素也可以使用应用场景:一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量注意点:1.并不是所有的属性都可以继承,、只有color/font-/text-/ line开头的属性才能继承;2.在css的继承中,不仅仅是儿子可以继承,只要是后代都能继承3.继承性中

    2020/03/30
  • haoip小白攻略_多数据源IP地址查询

    haoip小白攻略 官方网址:https://haoip.cn/ 简介描述:多数据源IP地址查询 haoip最好的IP位置查询工具。 本工具集合多个数据源供大家查询,包含了纯真数据…

    2020/03/06
  • 深入理解letter-spacing,word-spacing的对比区别基础入门_css入门教程

    letter-spacing lletter-spacing 属性增加或减少字符间的空白(字符间距)。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

    thisisatest

    //

    2020/04/06
  • Cucumber使用帮助一款js语言编写的自动化测试工具

    Cucumber基础入门 官方网址:https://cucumber.io/ GitHub:https://github.com/cucumber/cucumber-js 简介描述…

    2020/03/05
  • 什么是node repl?小白指南_node菜鸟指南

    Node REPL(Read Eval Print Loop)是Node自带的交互式解释器(又名Node shell),表示一个电脑的虚拟环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并接收系统的响应。REPL(交互式解释器)既可以作为一个独立的程序运行,也可以很容易地包含在其他程序中作为整体程序的一部分

    2020/03/20
  • js模块化总结小白知识_模块化零基础入门

    从前端打包的历史谈起在很长的一段前端历史里,是不存在打包这个说法的。那个时候页面基本是纯静态的或者服务端输出的, 没有 AJAX,也没有 jQuery。Google 推出 Gmail 的时候(2004 年),XMLHttpRequest, 也就是我们俗称的 AJAX被拾起的时候,前端开发者开始往页面里插入各种库和插件,我们的 js 文件程指数倍的开始增加了。

    2020/03/30
  • 十大经典排序算法小白常识_排序算法的 GitBook 在线书籍 《十大经典排序算法》,多语言实现。

    十大经典排序算法小白常识 官方网址:https://sort.hust.cc/ GitHub:https://github.com/hustcc/JS-Sorting-Algori…

    2020/03/10
  • NiceTool基础指南_用完即走,触手可及的工具大全

    NiceTool基础指南 官方网址:http://www.nicetool.net/ 简介描述:用完即走,触手可及的工具大全 NiceTool好工具网致力于收集打造各种简单易用在线…

    2020/03/11
  • CSS简介小白知识_简介菜鸟攻略

    什么是CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥

    2020/03/23