与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高度的时候建议直接写成兼容模式:
1 window.onscroll = function () { 2 var sTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0; 3 4 if(sTop > 400) 5 //TODO something you want 6 };
同理可得,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>
希望能帮到大家,以后遇见新的问题还会持续更新!