JS判断是否出现滚动条
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判断是否出现滚动条的更多相关文章
- js判断页面出现滚动条
当可视区域小于页面的实际高度时,判定为出现滚动条 当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的,浏览器的边框是2个像素, if (document.documentEleme ...
- 通过 JS 判断页面是否有滚动条的简单方法
前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁.最终通过参考不同方法,写了一个比较简单的方法.在判断滚动条的同时也需要计算滚动条的 ...
- JS判断页面是否出现滚动条
今天无聊,帮一个网友解决一个很无聊的问题,用JS判断页面是否出现滚动条,在网上看了一些代码,经过验证并不起作用,下面是在网上搜索到的代码: 当可视区域小于页面的实际高度时,判定为出现滚动条,即: if ...
- js 判断滚动条是否停止滚动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js判断滚动条是否已到页面最底部或顶部实例
原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...
- JS判断滚动条到底部,页面是否有滚动条
要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...
- js 判断滚动条的滚动方向
以下代码实现判断页面的滚动条的滚动方向: var sign = 80;//定义默认的向上滚与向下滚的边界 window.onscroll = window.onresize = function(){ ...
- JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
- js 判断进入可视区域
js 判断进入可视区域 CreateTime--2018年4月14日08:17:41 Author:Marydon 1.使用场景 图片懒加载时候需要用到,其他情况暂时没有遇到,欢迎留言补充! 2. ...
随机推荐
- OpenCV3添加滑动条和鼠标事件到图形界面
鼠标事件和滑动条控制在计算机视觉和OpenCV中非常有用,使用这些控件,用户可以直接与图形界面交互,改变输入图像或者变量的属性值. /* In this section, we are going t ...
- Unity学习笔记(1):认识Unity
Unity是什么? Unity是patterns & practices团队开发的一个轻量级.可扩展的依赖注入容器,具有如下的特性: 它提供了创建(或者装配)对象实例的机制,而这些对象实例可能 ...
- linux 学习笔记3
①find -name *.txt //查看当前目录所有文件 .txt 结尾文件 ②whereis *.txt //查看.txt结尾文件 但不显示 .txt 打包:tar -cf a.tar ...
- php5.3不支持 ereg、ereg_replace等函数问题,如提示:Deprecated: Function ereg() is deprecated
在php5.3中,正则函数ereg_replace已经废弃,而dedecms还继续用.有两个方案可以解决以上问题: 1.把php版本换到v5.3下. 2.继续使用v5.3,修改php.ini文件 ;e ...
- linux实现nginx按照日期存储日志
通过shell脚本实现+定时任务+nginx信号管理实现日志按日期存储. 1.编写shell脚本,实现日志按日期存储 #!/bin/bash base_path='/home/wwwlogs/' lo ...
- location跳转和header跳转的区别
1:header("location:url") 跳转之前不能有任何输出,如果想在header之前有输出,则要修改php.ini文件.具体 output_handler =mb_o ...
- 破解网络投票IP限制、验证码限制、COokie限制、Seesion限制的方法!(转)
顾名思义,网络投票就是在网络上进行的投票活动,但和其他类型的投票不同的是:网络投票是建立在网络投票系统上的,而结果完全由程序输出,无需人工参与.这既是网络投票系统的优点也是其缺点,没有了人工的参与,其 ...
- 运用百度开放平台接口根据ip地址获取位置
使用百度开放平台接口根据ip地址获取位置 今天无意间发现在百度开放平台接口,就把一段代码拿了下来,有需要的可以试试看:http://opendata.baidu.com/api.php?query=5 ...
- (转)Qt Model/View 学习笔记 (四)——创建新的Models
创建新的Models 介绍 model/view组件之间功能的分离,允许创建model利用现成的views.这也可以使用标准的功能 图形用户接口组件像QListView,QTableView和QTre ...
- python学习笔记16(错误、异常)
一.什么是错误,什么是异常 错误是指在执行代码过程中发生的事件,它中断或干扰代码的正常流程并创建异常对象.当错误中断流程时,该程序将尝试寻找异常处理程序(一段告诉程序如何对错误做出响应的代码),以帮助 ...