与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 ...
随机推荐
- Django 提交 form 表单(使用sqlite3保存数据)
优化 提交 form 表单,https://www.cnblogs.com/klvchen/p/10608143.html 创建数据库的字段,在 models.py 中添加 from django.d ...
- 扫码下单与ERP客户端锁桌功能FAQ
一.需求场景:因为目前客户端和平台端有两套数据库,两套数据库通过网络交互信息,且双方都可以发起支付,这种结构容易造成: 1.一笔订单同时支付.一笔订单支付时未按最新订单进行支付,支付多付.支付少付的情 ...
- Shell 全局变量、环境变量和局部变量
Shell 变量的作用域(Scope),就是 Shell 变量的有效范围(可以使用的范围). 在不同的作用域中,同名的变量不会相互干涉,就好像 A 班有个叫小明的同学,B 班也有个叫小明的同学,虽然他 ...
- 转：互斥锁解决同时上传数据丢失BUG
互斥锁:在一个线程修改变量时加锁,则其他变量阻塞,等待加锁的变量解锁后再执行,避免数据覆盖或者其他的异常情况. 原子操作: 所谓原子操作是指不会被线程调度机制打断的操作:这种操作一旦开始,就一直运行到 ...
- 关于php中 json_encode 编码成json数据参数说明
JSON_UNESCAPED_SLASHES 编码不要转义符 \ 反斜杠 JSON_UNESCAPED_UNICODE 编码不转义成 unicode 字符串 如果如果多个参数可以用 | 隔开添 ...
- iis设置默认文档，提示web.config配置xml格式不正确
网站上传后,配置默认文档,提示web.config配置xml格式不正确,几经尝试,发现是sqlserver密码中的“&”符号惹的祸,web.config文件中不能使用该字符.分享出来,大家遇到 ...
- 使用队列实现栈(2)(Java)
class MyStack { private Queue q1; private Queue q2; public MyStack(int size) { this.q1 = new Queue(s ...
- python3 使用ssl安全连接发送邮件
今天在测试,阿里云服务器发邮件时,发现使用默认的25端口,邮件无法正常发送,查了相关的资料,才知道,大部分的云服务器都会禁用25端口,所以才想到使用ssl 发送. 下面为具体的python3 使用ss ...
- XAMPP支持多PHP版本
在使用xampp进行开发的时候,我们都知道它只能支持一个PHP版本不能像PHPstudy那样方便进行不同版本的切换操作.因此我们手动的对于xampp进行改造一下,使其支持其他PHP版本 1. 从官网上 ...
- MongoDB系列：五、MongoDB Driver使用正确的姿势连接复制集
MongoDB复制集(Replica Set)通过存储多份数据副本来保证数据的高可靠,通过自动的主备切换机制来保证服务的高可用.但需要注意的时,连接副本集的姿势如果不对,服务高可用将不复存在. 使用复 ...