与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 ...
随机推荐
- DSAPI 键盘鼠标钩子
通常,说到Hook键盘鼠标,总需要一大堆代码,涉及各种不明白的API.而在DSAPI中,可以说已经把勾子简化到不能再简化的地步.甚至不需要任何示例代码即会使用.那么如何实现呢? Private Wit ...
- SQLServer存储过程编写规则
SQLServer编写规则 1. 存储过程 a) 在程序应用中,对于数据库“写”操作的功能通过存储过程来实现. b) 存储过程命名: SP_+表名(+功能名) 对于一个 ...
- Java基础小知识笔记
1. Integer转进制的一个类2. toBinaryString,toOctalString,toHexString.(转为二进制,八进制,十六进制的方法)3. 如果·数据的大小没有超过byte/ ...
- 长图的展开与收起（Android）
前言: 在app的文章中,经常会夹杂着一些特别长的长图.在阅读的时候需要滑动很久才能看图片下方的文字,因此对于长图只展示图片上面一部分,并且可以展开这个功能是很重要的. 效果: 基本思路: 利用sca ...
- Python使用Plotly绘图工具，绘制饼图
今天我们来学习一下如何使用Python的Plotly绘图工具,绘制饼图 使用Plotly绘制饼图的方法,我们需要使用graph_objs中的Pie函数 函数中最常用的两个属性values,用于赋值给需 ...
- Linux中常用来查看进程的命令PS
查看所有运行中的进程:ps aux | less 显示所有进程: ps -A / ps -e 显示进程的树状图:pstree
- 关于 python中的 TKinterlistbox 控件加横竖滚动条
上代码 win=tkinter.Tk() scorllbar=tkinter.Scrollbar(win) scorllbar.pack(side=tkinter.RIGHT,fill=tkinter ...
- js操作文章、字符串换行
操作前: 操作后: 第一步: 把中英文的逗号和顿号置换为 '\n’ support_unit = support_unit.replace(/,|,|./g, '\n') 第二步: //为了使\n ...
- js深浅拷贝
作为一枚前段,我们知道对象类型在赋值的过程中其实是复制了地址,从而会导致改变了一方其他也都被改变的情况.通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个情况. 浅拷贝 首先可以通过O ...
- arts打卡 从排序数组中删除重复项
Algorithm 从排序数组中删除重复项 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组 ...