通过封装scroll.js 获取滚动条的值
具体代码如下所示:
function Obj(){} Obj.prototype={ scroll:function(){ /* 主要是做兼容处理 这里必须时!=null 因为默认值和每次滚动的时侯 都可以值为0 但是 if(0)为假 所以就只要不为null 就执行 */ if(window.pageYOffset!=null){ /*IE9 和其他标准浏览器*/ return { left:window.pageXOffset, top:window.pageYOffset } } /*声明了<!DOCTYPE html> */ else if(document.compatMode=="CSS1Compat") { return{ left:document.documentElement.scrollLeft, top:document.documentElement.scrollTop } } else{ return { left:document.body.scrollLeft, top:document.body.scrollTop } } } } var obj=new Obj();
总结
以上所述是小编给大家介绍的通过封装scroll.js 获取滚动条的值,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
JavaScript触发onScroll事件的函数节流详解
问题描述 常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A.B.C.D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮:点击B,锚点跳转至B栏目,同时顶部的B按钮高亮:我们在Main组件里面滚动,滚动到B模块时,B按钮高亮.以上是我们经常会在开发中遇到的一个模型.如果是在以前,用jQuery作前端开发的话,实在是太熟悉不过了. 解决方案 主要想谈谈在React组件化开发中的性能优化方法. 我们的页面结构是这样的 <div className={style.main} id
-
基于iscroll.js实现下拉刷新和上拉加载效果
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于H5来实现. 先看下运行效果: 是不是有点小小的'鸡冻' ,它就是由我们今天要介绍的主人公'iscroll.js'实现的,接下来我以最最简便的方式教给大家~~ 实现步骤 一.准备好iscroll.js库 到官网下载即可: https://github.com/cubiq/iscroll 二.搭建页面结构 &l
-
js浏览器滚动条卷去的高度scrolltop(实例讲解)
1.之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是"只读"的属性-> 只能通过属性获取值,不能通过属性修改元素的样式 2.scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一"可读写"的属性) box.scrollTop = 0 // 直接回到容器的顶部 我们的scrollTop的值是存在边界值(最大和最小值),我们设置的值比最小值小或者比最大值大都没用,起到
-
mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下 附上链接地址http://www.mescroll.com/api.html#NPM,手机端和浏览器都能够使用,唯一推荐: 使用过程中要注意这些问题http://www.mescroll.com/qa.html: 使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一定要在dom渲染之后的方法(didMount)中初始化,因为这个需要拿到dom对象:
-
移动端日期插件Mobiscroll.js使用详解
mobiscroll js日期插件的基础入门案例,移动端开发过程中可能会用到. <html> <head> <meta charset="UTF-8"> <title>mobiscroll</title> <link type="text/css" rel="stylesheet" href="../js/mobiscroll.custom-2.6.2.min.css&q
-
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
本文实例讲述了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法.分享给大家供大家参考,具体如下: 1.分页加载数据的基础上,如何通过滚动加载,实现分页加载数据的效果,github上,针对AngularJS,有一款不错的插件,地址为:https://github.com/sroze/ngInfiniteScroll 2.下面来看官方给出的文档 (1)使用样例: <ANY infinite-scroll='{expression}' [infinite-scroll-di
-
js中scrollTop()方法和scroll()方法用法示例
本文实例讲述了js中scrollTop()方法和scroll()方法用法.分享给大家供大家参考,具体如下: 设置滚动条据顶部的高度: $("div").scrollTop(100); //把 scroll top offset 设置为 100px 获得滚动条的高度: $("div").scrollTop()://获得 scroll top offset 触发滚动事件 $(selector).scroll() 将函数绑定到滚动事件中: $(selector).scro
-
通过封装scroll.js 获取滚动条的值
具体代码如下所示: function Obj(){} Obj.prototype={ scroll:function(){ /* 主要是做兼容处理 这里必须时!=null 因为默认值和每次滚动的时侯 都可以值为0 但是 if(0)为假 所以就只要不为null 就执行 */ if(window.pageYOffset!=null){ /*IE9 和其他标准浏览器*/ return { left:window.pageXOffset, top:window.pageYOffset } } /*声明了
-
js 获取radio按钮值的实例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
使用JS获取SessionStorage的值
获取sessionStorage的意义 首先获取它是为了将获得的信息输出或者alert():让人容易看到, 其次,在静态页面中,如果使用sessionStorage就相当于在动态页面里连接了数据库一样 例如:我上一篇所做的为button按钮添加回车事件的项目中所用到的可以使用js中的sessionStorage获取页面输入的信息,也可以获得后台计算所得的数据,并且显示出来. 废话不多说,看代码重要: 具体实现 <script type="text/javascript">
-
js获取下拉列表的值和元素个数示例
js获取下拉列表框元素的个数 复制代码 代码如下: <!DOCTYPE html><html><head><script>function getLength(){alert(document.getElementById("mySelect").length);//元素个数}</script></head><body> <form><select id="mySelect&
-
vue.js 获取当前自定义属性值
假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: <h5 class="left t-title" @click='getDataId' :data-id="item.id"></h5> <script> methods: { getDataId() { console.log(this.data-id); }
-
JS 获取滚动条高度示例代码
复制代码 代码如下: function getScrollTop(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){ scrollTop=document.documentElement.scrollTop; }else if(document.body){ scrollTop=document.body.scrollTop; } return scrollTop; }
-
js获取ajax返回值代码
复制代码 代码如下: z = $.ajax({url:"__URL__/add/",type:'POST',dataType:"json",async:false,cache:false,data:"step=ajax&ajax_type=checkEmail&email="+email,}).responseText;
-
js获取 type=radio 值的方法
复制代码 代码如下: <ul> <li> <input type="radio" name="radio" value="前台支付 " id="radio" />前台支付 --如需整晚保留,请预付房费. </li> <li> <input type="radio" name="radio" value="担保支付
-
JS获取后台Cookies值的小例子
复制代码 代码如下: function getCookie(name) { var offset,cookieValue; var search=name+"="; if(document.cookie.length>0) { offset=document.cookie.indexOf(search); if(offset!=-1) {
-
js获取.aspx页面里面的服务器控件和.ascx中的服务器控件值
A.aspx页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="OrderManage_A" %> <%@ Register Src="../UserControl/CtrlCalendar.ascx" TagName="CtrlCalendar&qu
随机推荐
- vue2 中如何实现动态表单增删改查实例
- Git远程操作详解
- Swift中的类class与结构体struct体学习笔记
- 全面解析Bootstrap表单使用方法(表单控件状态)
- javascript验证上传文件的类型限制必须为某些格式
- 自己常用到的自定义公共类(已测试通过)
- PHP常用的三种设计模式汇总
- python 队列详解及实例代码
- 简要解读C++的动态和静态关联以及虚析构函数
- php格式化电话号码的方法
- asp中utf8不会出现乱码的写法
- Nginx+Lua+Redis构建高并发Web应用
- 根据多条件查询临时表 想得到不同结果集的方法
- 分享一个插件实现水珠自动下落效果
- linux托盘不断闪烁之解决方法
- LZW压缩算法 C#源码
- Yii入门教程之Yii安装及hello world
- Vue实现本地购物车功能
- C++调用Matlab函数求特征值
- vue中v-show和v-if的异同及v-show用法