1.window.scroll()

概述

滚动窗口至文档中的特定位置。

语法

window.scroll(x-coord, y-coord)  // 参数表示想要置于左上角的像素点的横纵坐标

2.window.scrollBy()

概述

在窗口中按指定的偏移量滚动文档(相对于当前位置进行偏移)

语法

window.scrollBy(x-coord, y-coord); // 参数为横纵偏移量
window.scrollBy(options); // 参数是一个包含三个属性的对象{top,left,behavior}// top等同于y-coord,left等同于x-coord// behavior表示滚动行为: smoth(平滑滚动),instant (瞬间滚动),默认值 auto(效果等同于instant)

3.window.scrollTo()

该函数实际上与window.scroll是一样的,兼容性较差

参数与window.scrollBy()相同,都可传入对象


4.滚动到指定元素位置 -  2019/9/6

var $wrapper = $('#wrapper');     // 父级容器
var $target = $('#target');    // 目标元素
$wrapper.scrollTop($target.offset().top - $wrapper.offset().top + $wrapper.scrollTop())
// 目标元素与视口的距离 - 父级容器与视口的距离 + 当前滚动条的位置

5.获取当前滚动条位置 - 2020/1/14

let body = document.body;
body.scrollTop; // number, 目标元素当前的垂直滚动位置
body.scrollLeft; // number, 水平滚动位置

6.判断是否滚动到最底部

let body = document.body;
body.clientHeight; // 元素当前可视区域高度(不算隐藏的部分)
body.scrollHeight; // 元素滚动区域高度
// 滚动到底部
if(body.clientHeight + body.scrollTop == body.scrollHeight) {console.log('已滚动到底部')
}

关于window.scroll系列方法汇总 滚动到指定元素位置相关推荐

  1. ios滚动条影响父页面 vue_在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案...

    在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案 原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrollin ...

  2. 1. 定义方法,求出指定元素在数组中出现的次数.

    package Day05;import java.util.ArrayList;/*** 3.* c* 1. 定义方法,求出指定元素在数组中出现的次数.* 2. 定义方法,统计数组中出现次数为1的元 ...

  3. JS slice()方法返回数组中指定元素

    JS slice()方法返回数组中指定元素 定义和用法 slice() 方法可从已有的数组中返回选定的元素. slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分. 注意: sli ...

  4. 【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置

    <script> export default {data() {return {pageIndex: 0,//页码pageSize: 10,//每次加载条数lock: false,//防 ...

  5. js滚动条滚动到指定元素

    let item = document.getElementById("item"); // 指定的元素 let wrapper = document.getElementById ...

  6. jQuery之滚动事件$(window).scroll(function()

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  7. recyclerview滚动到指定条目

    android recyclerview滚动到指定条目 自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView ...

  8. jq点击所有子元素_jQuery删除/清空指定元素下的所有子节点的方法

    上几篇文章详细的介绍了,我们可以利有jQuery中的detach()方法和jQuery中的remove()方法删除指定的或是匹配的元素,也可以使用removeClass()方法以及removeAttr ...

  9. php移除所有子节点,jQuery删除/清空指定元素下的所有子节点的方法

    上几篇文章详细的介绍了,我们可以利有jQuery中的detach()方法和jQuery中的remove()方法删除指定的或是匹配的元素,也可以使用removeClass()方法以及removeAttr ...

最新文章

  1. 8大领域、6大机遇!读懂2020年AI医疗新风向
  2. 计算机ppt制作教案,全国计算机一级B考试基础篇制作人徐守威PPT教案学习.pptx
  3. Android隐藏软键盘收回软键盘
  4. WARNING: Ignoring invalid distribution -ip
  5. 35、JAVA_WEB开发基础之过滤器
  6. C#多线程编程系列(二)- 线程基础
  7. 2019年关于VM和Kubernetes的思考 | 技术头条
  8. pycharm中设置显示行数
  9. webservice的wsdl文件怎么生成
  10. go语言编写同时支持Linux和Windows的单文件Web界面文件浏览器filebrowser介绍
  11. python实验报告实验目的_Python实验报告五
  12. ie9浏览器无法安装ActiveX控件问题
  13. 阿里云是干什么用的?
  14. readmemh函数引用的txt格式_[转载](zz)用于读取和写入文本文件Verilog代码
  15. Rosetta Stone 罗赛塔 罗塞塔 石碑
  16. dhu复试基础——36 水果价格
  17. IAR获取固件编译的时间
  18. 改变iOS系统自带返回按钮事件
  19. VisionPro自用截图
  20. checking for mysql_commit in -lmy_安装ruby环境,用mysql数据库,总是报错,调了一下午,网上方法都用了也不管事...

热门文章

  1. 怎么开淘宝网店?淘宝网开店流程图解,淘宝开店教程!
  2. 三维重建之多频外差解包裹学习笔记
  3. 2017年,我成功入职小红书的经历
  4. 用外部html圆形里装数字,如何使用CSS用圆圈包围数字?
  5. vanilla是什么意思
  6. 自动定量发表删除空间说说脚本代码
  7. Windows系统中 Xmanager 6 企业版下载安装激活教程
  8. 微服务研究 - Swoole框架-Swoft初探
  9. 做了 8 个月的技术经理,我信了……
  10. 机顶盒显示该服务器未授权,户户通提示E04该频道未授权的解决办法