与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 ...
随机推荐
- 大数据---Ranger-1
背景:从软通出来,告别华为外包,离开H区,进入了一家搞大数据的创业公司,感觉周围都好陌生,记录下自己大数据的career! 2019-03-4新的征程-入职第一天: 一.办理入职手续 公司人比较少,没 ...
- 委托的多线程方法BeginInvoke
同步方法和异步方法: 同步方法调用在程序继续执行之前需要等待同步方法执行完毕返回结果.(比如烧水泡茶,需要等水烧开了才能继续泡茶) 异步方法则在被调用之后立即返回以便程序在被调用方法完成其任务的同时执 ...
- git使用总结（持续更新，个人总结记录使用）
1.拉取代码报错(Couldn't merge origin/master: You have not concluded your merge (MERGE_HEAD exists).) 造成原因: ...
- 获取url特定参数
获取通过url拼接的特定参数值: // 获取url指定参数 function getUrlParams(name) { var reg = new RegExp("(^|&)&quo ...
- Python 强制停止多线程运行
强制停止多线程运行 by:授客 QQ:1033553122 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'shouke' ...
- js坚持不懈之13：JavaScript查找HTML元素的方法
1. 通过 id 查找 HTML 元素 <!DOCTYPE html> <html> <body> <p id = "intro"> ...
- vcenter 忘记 administrator@vsphere.local 密码怎么办
现有一个windows版本的vcenter5.5管理员密码丢失,我们可以使用vmware的工具vdcadmintool,在命令行进入到vdcadmintool所在的目录,然后执行下vdcadminto ...
- clamwin + 拖拽查毒+右键查毒
下载 clamwin 到 windows 并安装 http://www.clamwin.com/ 为了方便使用clamwin,写一个bat,实现拖拽到bat 自动查毒 @echo off mode c ...
- Andriod studio 打包aar
因为项目不同,有些公用库而且还是c++的,还有一些带资源的,简单的复制遇到库升级又是一轮配置,编译成aar则解决这些麻烦. 但是默认andriod studio的make moudle只生成debug ...
- git 同步远程分支
1. 同步远程分支到本地 git fetch 2. 查看本地分支 git branch *dev //当前分支 master test 3.切换分支 git checkout master // 切换 ...