原生JS滚动条位置处理
// 滚动条位置
var scrollPosition = {
// 位置
result: 0,
// 监听位置
rememberPosition: function () {
var type = 'scroll'
var handle = function () {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
scrollPosition.result = scrollTop
}
if (window.addEventListener) {
window.addEventListener(type, handle, false)
}
if (window.attachEvent) {
window.attachEvent('on' + type, handle)
}
},
// 设置位置
setPostion: function () {
window.scrollTo(document.body.scrollWidth, scrollPosition.result)
}
}
原生JS滚动条位置处理的更多相关文章
- 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮
在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为f ...
- 原生js实现滚动条
var SimulateScroll = (function(){ var oParent = document.getElementById('wrap-scroll-bar'), oBox = d ...
- js设置滚动条位置
JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...
- 原生js来写获取元素距离顶部距离,以及滚动条滚动指定距离和时间控制
这是我在写vue项目里封装的一个公共js类 里面还有一些其他的方法,一并拿过来了 class Public { isDesktop(){ //判断是否为pc端 return (window.scree ...
- 原生JS 和 JQ 获取滚动条的高度,以及距离顶部的高度
JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...
- 原生js实现随着滚动条滚动,导航会自动切换的效果
最近学习前端,把前面用原生js写的一段有关tab切换效果的代码贴上,实现的效果比较简陋,请大家见谅 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 原生js--兼容获取窗口滚动条位置和窗口大小的方法
各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的API,以下是对其封装,解决兼容性问题 /** * 获取浏览器视口的大小(显示文档的部分) * */function getViewPort ...
随机推荐
- 如何解决tomcat9.0.14启动时控制台中出现乱码
把/conf/logging.properties里的java.util.logging.ConsoleHandler.encoding= UTF-8改成java.util.logging.Conso ...
- jdbcType="DATE"和jdbcType=" TIMESTAMP"的区别
原文: https://www.cnblogs.com/fswhq/p/jdbcType.html 当传入null值时,jdbcType 会防止null空指针异常报错 Mybatis 中jdbcTyp ...
- 关于R语言中set.seed()
在r中取sample时候,经常会有set.seed(某数),经常看见取值很大,其实这里无论括号里取值是多少,想要上下两次取值一样,都需要在每次取值前输入同样的set.seed(某数),才能保证两次取值 ...
- vue 表格组件分享
分享一款自己写的table组件 用起来还算简单好用 (先介绍使用方法(ts版本的)) 引入组件不多说 import jTable from '../comp/comp/table/table.v ...
- 阶段3 1.Mybatis_08.动态SQL_01.mybatis中的动态sql语句-if标签
创建新的工程 复制到新建的项目里面 pom.xml依赖部分复制过来 dao中整理代码 只保留四个查询 映射文件也只保留四个查询方法 增加一个根据条件查询的方法. 由于用了别名,所以parpameter ...
- flex 判断对象的类型
在判断flex对象的类型之前,首先是获取对象类型,获取的方式有: mx.utils.NameUtil.getUnqualifiedClassName(object:Object):String // ...
- 【Hibernate】---Query、Criteria、SQLQuery
一.核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-con ...
- proteus 与 keil 的安装及联调
proteus 安装 Win10 系统的下载链接可以参考这里:https://tieba.baidu.com/p/5644915130?traceid= 百度网盘地址 链接1: http://pan. ...
- centos7:storm集群环境搭建
1.安装storm 下载storm安装包 在线下载 wget http://apache.fayea.com/storm/apache-storm-1.1.1/apache-storm-1.1.1.t ...
- 分类属性绘图(seaborn的catplot函数)
可以通过指定catplot()函数的kind参数为"bar", "box", "violin"等分别绘制以前提过的柱形图,盒图,小提琴图等. ...