http://www.cnblogs.com/yazdao/archive/2010/12/06/1897742.html

该博文是想用JS检测浏览器是否出滚动条。

这边想到一个比较取巧的方法,

假如没有出滚动条的时候,手工给增加一个滚动值会怎么样?

程序上就是给body或documentElement的scrollLeft、scrollTop赋值,

马上动手实现了一下,结果跟我意想的差不多,呵呵

浏览器在没有出滚动条的时候,赋值后该值不会发生变化,始终是0。

另外扩展了一下,该检测方法,不仅可以检测页面滚动条,

传入要检测的节点,一样可以得到想要的结果。

以下是我的实现,没有做太多异常处理:

(给scrollLeft,scrollTop赋负数值时会报错,此外scrollLeft,scrollTop的值不能大于实际最大的滚动值)

var isScroll = function (el) {
// test targets
var elems = el ? [el] : [document.documentElement, document.body];
var scrollX = false, scrollY = false;
for (var i = 0; i < elems.length; i++) {
var o = elems[i];
// test horizontal
var sl = o.scrollLeft;
o.scrollLeft += (sl > 0) ? -1 : 1;
o.scrollLeft !== sl && (scrollX = scrollX || true);
o.scrollLeft = sl;
// test vertical
var st = o.scrollTop;
o.scrollTop += (st > 0) ? -1 : 1;
o.scrollTop !== st && (scrollY = scrollY || true);
o.scrollTop = st;
}
// ret
return {
scrollX: scrollX,
scrollY: scrollY
};
};
出自于:http://my.oschina.net/oncereply/blog/38511

  

JS判断是否出现滚动条的更多相关文章

  1. js判断页面出现滚动条

    当可视区域小于页面的实际高度时,判定为出现滚动条 当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的,浏览器的边框是2个像素, if (document.documentEleme ...

  2. 通过 JS 判断页面是否有滚动条的简单方法

    前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁.最终通过参考不同方法,写了一个比较简单的方法.在判断滚动条的同时也需要计算滚动条的 ...

  3. JS判断页面是否出现滚动条

    今天无聊,帮一个网友解决一个很无聊的问题,用JS判断页面是否出现滚动条,在网上看了一些代码,经过验证并不起作用,下面是在网上搜索到的代码: 当可视区域小于页面的实际高度时,判定为出现滚动条,即: if ...

  4. js 判断滚动条是否停止滚动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  6. JS判断滚动条到底部,页面是否有滚动条

    要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...

  7. js 判断滚动条的滚动方向

    以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ ...

  8. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  9. js 判断进入可视区域

      js 判断进入可视区域 CreateTime--2018年4月14日08:17:41 Author:Marydon 1.使用场景 图片懒加载时候需要用到,其他情况暂时没有遇到,欢迎留言补充! 2. ...

随机推荐

  1. 正文字体大小:大 中 小 解决configure: error: Cannot find libmysqlclient under /usr

    今天在64位centos5.6系统上编译PHP5.2.17报错 checking for MySQL support... yes, shared checking for specified loc ...

  2. gulp 不是内部或者外部命令 或者 webpack 不是内部或者外部命令

    gulp安装也正常,但是就是查看gulp -v的时候报错,原因:缺少系统变量PATH或者PATH变量错误 提示:这个系统变量PATH,直接追加就好(多个变量值用分号;隔开),不要删除已经有的系统变量P ...

  3. Tomcat & Nginx

    http://cxshun.iteye.com/blog/1535188 反向代理方式实际上就是一台负责转发的代理 服务器,貌似充当了真正服务器的功能,但实际上并不是,代理服务器只是充当了转发的作用, ...

  4. encodeURIComponent与encodeURI的区别

    encodeURIComponent()   -->把字符串编码为 URI 组件. encodeURI()                   -->把字符串编码为 URI. var te ...

  5. Cassandra1.2文档学习(18)—— CQL数据模型(下)

    三.集合列 CQL 3 引入了一下集合类型: •set •list •map 在关系型数据库中,允许用户拥有多个email地址,你可以创建一个email_addresses表与users表存在一个多对 ...

  6. 在Linux上部署和操作Couchbase

    couchbase属于nosql系列,个人感觉它要比mongodb操作简单,mongo的查询语句太复杂.在数据的持久性方面它区别于其他nosql 的唯一大亮点是不受限于其内存分配了多少,只要磁盘空间够 ...

  7. ACE_linux:TCP通信

    1.涉及类 ACE_INET_Addr//ACE网络地址ACE_SOCK_Acceptor//ACE网络服务器ACE_SOCK_Connector//ACE网络客户端ACE_SOCK_Stream// ...

  8. ARM-Linux S5PV210 UART驱动(6)----platform device的添加

    开发板是飞凌OK210 arch/arm/mach-s5pv210/mach-smdkc110.c 首先是UART的寄存器默认配置信息: /* Following are default values ...

  9. Python在Windows下开发环境配置汇总

    最近比较关注学习Python方面的资料和课程,由于Python本身基本都是在Linux下开发,本人windows用习惯了初用Linux各种别扭啊. 下面将我在配置Windows环境下的禁言写出来,与大 ...

  10. 干净的 ef for Oracle appconfg配置

    <?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...