与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 ...
随机推荐
- .net工具类 获取枚举类型的描述
一般情况我们会用枚举类型来存储一些状态信息,而这些信息有时候需要在前端展示,所以需要展示中文注释描述. 为了方便获取这些信息,就封装了一个枚举扩展类. /// <summary> /// ...
- 代码托管-gerrit-介绍与环境搭建
什么是gerrit? 转载自 https://blog.csdn.net/tanshizhen119/article/details/79874127 gerrit是谷歌开源的一个git服务端. 主要 ...
- throw和throws的区别以及try,catch,finally在有return的情况下执行的顺序
一,抛出异常有三种形式,一是throw,一个throws,还有一种系统自动抛异常.下面它们之间的异同. (1).系统自动抛异常 1.当程序语句出现一些逻辑错误.主义错误或类型转换错误时,系统会自动抛出 ...
- React 16.x 新特性思维导图
React 16版本相对于以前的版本做了很大的改动,下面是我整理的React 16.x 新特性的思维导图文件,欢迎围观和指导:
- flex 输入框布局
1:创建一个弹性容器(display:flex) 2:构建2个或3个弹性项目. 3:把弹性项目设置为居中对齐.(align-items:center) 4:改变input自身对齐方式,把它设置为拉伸以 ...
- 浅谈AndroidGPU过度绘制、GPU呈现模式分析及相关优化
在真机设备下有一个开发者选项,这个大家都知道,我们最常用的就打开'USB调试'功能,方便真机调试. 在这开发者选项中还有个选项,'调试GPU过度绘制' 这里选择第二个选项'显示过度绘制区域' 可以看到 ...
- 30号快手笔试（三道ac两道半）————-历史上最大的网络失误orz
case 50 ,20,100 做题以来第一次重大失误:最后两分钟发现手机关机了,然后充电开机orz 页面是js代码, 钟表是一直会走的, 手机没电了, 电脑连接的手机的热点: 只顾在调试,先过了第 ...
- jsp页面中include静态html出现乱码问题的解决方式
这个问题出现过两次,上次没有做好记录,今天又出现了.不过这两次的情景也不完全一致. 今天通过搜索找到这篇文章的解决方式很好,可供参考.原博客地址http://blog.csdn.net/izgnaw/ ...
- 简单的纯js三级联动
参考这个 日尼禾尔 二级联动 写了三级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- Swift中的for循环基本使用
OC中的for循环写法: ;i < ;i++) { NSLog(@"i=%zd",i); } Swift中的for循环写法: let a = ; ..< a { pri ...