使用jQuery判断浏览器滚动条位置的方法


Posted in Javascript onMay 30, 2016

项目背景

webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。

遇到问题

1、我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势,后面的文章会介绍,欢迎关注!

2、通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,滚动到一定距离后返回是上滚还是下滚。

单纯判断滚动条方向

function scroll( fn ) {
  var beforeScrollTop = document.body.scrollTop,
    fn = fn || function() {};
  window.addEventListener("scroll", function() {
    var afterScrollTop = document.body.scrollTop,
      delta = afterScrollTop - beforeScrollTop;
    if( delta === 0 ) return false;
    fn( delta > 0 ? "down" : "up" );
    beforeScrollTop = afterScrollTop;
  }, false);
}

调用方法:

scroll(function(direction) { console.log(direction) });

以上方法手机苹果浏览器事件会跳动,解决方法及代码改进

scrollDirect: function (fn) {
  var beforeScrollTop = document.body.scrollTop;
  fn = fn || function () {
  };
  window.addEventListener("scroll", function (event) {
    event = event || window.event;

    var afterScrollTop = document.body.scrollTop;
    delta = afterScrollTop - beforeScrollTop;
    beforeScrollTop = afterScrollTop;

    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight > scrollHeight - 10) { //滚动到底部执行事件
      fn('up');
      return;
    }
    if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
      fn('up');
    } else {
      if (Math.abs(delta) < 10) {
        return false;
      }
      fn(delta > 0 ? "down" : "up");
    }
  }, false);
}

调用方法:

var upflag=1;
  var downflag= 1;
  //scroll滑动,上滑和下滑只执行一次!
scrollDirect(function (direction) {
    if (direction == "down") {
      if (downflag) {
        $(".footer_wrap").slideUp(200);
        downflag = 0;
        upflag = 1;
      }
    }
    if (direction == "up") {
      if (upflag) {
        $(".footer_wrap").slideDown(200);
        downflag = 1;
        upflag = 0;
      }
    }
 });

滚动条滚动到底部和头部判断

其实我上面的函数中已经有判断,下面再列一下!看如下函数!

BottomJumpPage: function () {
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if (scrollTop + windowHeight == scrollHeight) { //滚动到底部执行事件
          console.dir("我到底部了");

      }
      if (scrollTop == 0) { //滚动到头部部执行事件
      console.dir("我到头部了");

      }
 }

调用方法:

$(window).scroll(BottomJumpPage);

判断div是否滚动到底部

上面的方法是判断滚动轴是否滚动到底部,但是有时候,我们在做滚动加载的时候,有时候也要做某个div是否滚动到底部然后加载。那么如何判断DIV的滚动轴滚动到底部呢?

这个也需要了解几个高度:

1、div的高度 $("#某div").height();
2、滚动轴的高度 $(#某div)[0].scrollHeight
3、滚动轴到div顶部的高度 $(某div)[0].scrollTop;
书写代码如下:

$(document).ready(function (){
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;  //滚动到的当前位置
    var nDivHight = $("#div1").height();
    $("#div1").scroll(function(){
     nScrollHight = $(this)[0].scrollHeight;
     nScrollTop = $(this)[0].scrollTop;
     if(nScrollTop + nDivHight >= nScrollHight)
      alert("滚动条到底部了");
     });
});

PS:jQuery滚动条位置控制:

将div的滚动条滚动到其子元素所在的位置,方便自动定位。

var container = $('div'), 

scrollTo = $('#row_8');


container.scrollTop( 

scrollTo.offset().top - container.offset().top + container.scrollTop() 

);


// Or you can animate the scrolling: 

container.animate({ 

scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop() 

});?

 

Javascript 相关文章推荐
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
JS delegate与live浅析
Dec 21 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
【js设计模式】SOLID五大设计原则
Mar 24 Javascript
JS检测移动端横竖屏的代码
May 30 #Javascript
BootStrap中Tab页签切换实例代码
May 30 #Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 #Javascript
拥Bootstrap入怀——导航栏篇
May 30 #Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 #Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 #Javascript
Bootstrap编写导航栏和登陆框
May 30 #Javascript
You might like
PHP实现中文圆形印章特效
2015/06/19 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
Python 文件和输入输出小结
2013/10/09 Python
python套接字流重定向实例汇总
2016/03/03 Python
Python字符串处理实现单词反转
2017/06/14 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python unichr函数知识点总结
2020/12/16 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
中学生运动会入场词
2014/02/12 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL