与scrollTop相关的一些方法（更新）
刷新页面回到页面顶部
$(document).ready(function () {
$(window).scrollTop(0);
}
滑动到页面指定位置执行某项操作
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 300) {
//dosomething
}
});
});
最近做项目的时候，发现了一个问题，使用上面的方法无法获取到scrollTop的值，导致scrollTop值始终为0，去网上搜了一下才发现是DTD的问题。
页面指定了DTD，即指定了DOCTYPE时（<!DOCTYPE html>），使用document.documentElement.scrollTop。
页面没有DTD，即没指定DOCTYPE时，使用document.body.scrollTop。
同时也发现了各个浏览器下获取scrollTop的是有差别的，下面来总结一下：
各浏览器下 scrollTop的差异
IE：
没有doctype声明的页面，使用 document.body.scrollTop 或 document.documentElement.scrollTop
有doctype声明的页面，使用 document.documentElement.scrollTop；
Chrome、Firefox：
没有doctype声明的页面，使用 document.body.scrollTop 来获取 scrollTop高度 ；
有doctype声明的页面，使用 document.documentElement.scrollTop；
Safari:
safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset
SO,为了解决以上的兼容问题，我们获取页面scrollTop高度的时候建议直接写成兼容模式：
window.onscroll = function () {
var sTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0;
if(sTop > 400)
//TODO something you want
};
同理可得，scrollLeft（页面向左卷东距离）的获取方法
在vue项目中获取某一固定区域的scrollTop值时又发现了一个新方法，可以在需要监听区域的父级块元素上添加@scroll方法，代码如下：
<template>
<div class="box" @scroll="getScroll">测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值测试监听scroolTop值。。。</div>
</template> <script>
export default {
data() {
return {
sTop: ''
}
}
},
methods:{
getScroll(e){
console.log(e)
this. sTop = e.target.scrollTop
if(this.scroll >= 500){
//TODO something you want
}
}
}
</script>
<style scope>
. box{
position: relative;
width: 100%;
height: 400px;
overflow-y:auto;
}
</style>
希望能帮到大家，以后遇见新的问题还会持续更新！
与scrollTop相关的一些方法（更新）的更多相关文章
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- Android随笔之——Android时间、日期相关类和方法
今天要讲的是Android里关于时间.日期相关类和方法.在Android中,跟时间.日期有关的类主要有Time.Calendar.Date三个类.而与日期格式化输出有关的DateFormat和Simp ...
- Java基础-继承-编写一个Java应用程序，设计一个汽车类Vehicle，包含的属性有车轮个数 wheels和车重weight。小车类Car是Vehicle的子类，其中包含的属性有载人数 loader。卡车类Truck是Car类的子类，其中包含的属性有载重量payload。每个 类都有构造方法和输出相关数据的方法。最后，写一个测试类来测试这些类的功 能。
#29．编写一个Java应用程序,设计一个汽车类Vehicle,包含的属性有车轮个数 wheels和车重weight.小车类Car是Vehicle的子类,其中包含的属性有载人数 loader.卡车类T ...
- 三种dedecms调用相关文章的方法
在文章的末尾或侧边栏添加相关文章可以提高用户的黏度,提高pv,增加se的好印象(哈哈),那么dedecms如何调用相关文章呢?有三种方法可以实现. 第一种dedecms调用相关文章的方法,用默认的li ...
- CakePHP采用model的save方法更新数据所需查询
采用model的save方法更新数据所需查询 1. 验证时候要确认是update 或者 create,以便使用对应规则 public $validate = array( 'field_name' = ...
- WinForms C#：html编辑器工程源码，含直接写WebBrowser的文件流、IPersistStreamInit接口的声明和一些相关的小方法
原文:WinForms C#:html编辑器工程源码,含直接写WebBrowser的文件流.IPersistStreamInit接口的声明和一些相关的小方法 首先多谢朋友们的捧场: 今天给大家带来一个 ...
- android studio gradle 两种更新方法更新
android studio gradle 两种更新方法更新 第一种.Android studio更新 第一步:在你所在项目文件夹下:你项目根目录gradlewrappergradle-wrapper ...
- 屏幕旋转时调用PopupWindow update方法更新位置失效的问题及解决方案
接到一个博友的反馈,在屏幕旋转时调用PopupWindow的update方法失效.使用场景如下:在一个Activity中监听屏幕旋转事件,在Activity主布局文件中有个按钮点击弹出一个Pop ...
随机推荐
- 简述ADO.NET的连接层
前面曾提到过ADO.NET的连接层允许通过数据提供程序的连接.命令.数据读取器对象与数据库进行交互.当想连接数据库并且使用一个数据读取器对象来读取数据时．需要实现下面的几个步骤 * 创建.配置.打开连 ...
- 将Xml文件递归加载到TreeView中
#region [通过XDocument的方式将Xml文件递归到TreeView控件中] //读取Xml文件(XDocument) //1.加载Xml文件 XDocument document=XD ...
- httpclient绕过证书验证进行HTTPS请求
http请求是我们常用的一种web应用的应用层协议,但是由于它的不安全性,现在正在逐渐向https协议过渡.https协议是在http的基础上进行了隧道加密,加密方式有SSL和TLS两种.当serve ...
- react中PureComponent浅对比策略
PureComponent实现了Component中没有实现的shouComponentUpdata()方法,会对state和props进行一次浅对比,本文介绍一下浅对比策略 源码中,实现浅对比的函数 ...
- 关于elementui表单数字校验踩坑记
需求:1.输入类型是数字.2.数字大小有限制.3.非必填 做法: <el-form-item label="熟悉程度" prop="averageCaseRunTi ...
- noi.ac#309 Mas的童年(子集乱搞)
题意 题目链接 Sol 记\(s_i\)表示前\(i\)个数的前缀异或和,我们每次相当于要找一个\(j\)满足\(0 < j < i\)且\((s_i \oplus s_j) + s_j\ ...
- (办公)git入门
git版本库(分布式版本控制系统),可以记录每次文件的改动,是程序开发的好帮手. 1.创建版本库: repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文 ...
- SQL SERVER-创建Alwayson
Failover Custer(AlwaysOn) 创建Failover Cluster和启动AlwaysOn 创建Failover Cluster 节点的个数要是奇数如果是偶数则要加一个仲裁磁盘.在 ...
- 报错TypeError: $(...).live is not a function解决方法
报错的原因是这个方法在jquery1.7以后就被废除了, 1.7以后的版本改用.on()方法 之前的用法: .live(events, function) 新方法: .on(eventType, se ...
- win10下Resin安装--入门（1）
我个人采用是解压版的,直接解压亦可使用下载地址 开启该服务需要的环境:首先你的JDK必须安装成功 解压后你会看到 当我们运行程序时,需要修改配置文件中的相关配置: 1.端口:以免端口被占用 2.相应 ...