js实现div滚动条在页面刷新 滚动条位置固定
思想:1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie
2.页面加载时再读取document.cookie的值,设置给div的scrollTop
js代码实现:
function KeepScrollBar() {
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.getElementById('divContent').scrollTop;
}
document.cookie = "scrollTop=" + scrollPos; //スクロールバーの位置をcookiesに保存する
}
window.onload = function () {
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookiesに値があれば、スクロールバーの位置を読み込み
document.getElementById('divContent').scrollTop = parseInt(arr[1]);
}
}
html代码:
<div id="divContent" style="margin: 7px 0px; clear: both; overflow: scroll; overflow-x: hidden;
text-align: left; width: 1340px; padding: 0px 10px 0px 0px;" onscroll= "KeepScrollBar()">
js实现div滚动条在页面刷新 滚动条位置固定的更多相关文章
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- JavaScript实现页面刷新滚动条位置不变(利用cookie)
实验环境:vs2015 asp.net(C#) 主要原理: 1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos], 2.页面刷新或重载时查询cookie[pos]中的值是否存在,若 ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- JQuery实现页面刷新滚动条自动滚动到特定位置
var cotentOffset = $('#6f').offset(); $('.info_box').animate({ scrollLeft: cotentOffset.left }, ); 原 ...
- JS控制div跳转到指定的位置的解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...
- JS实现div块的拖放,调换位置
主要是HTML5 的拖放(Drag 和 Drop) 例子(不需要对div设置ID): <!DOCTYPE HTML> <html> <head> <scrip ...
- asp.net页面刷新或者回发后DIV的滚动条位置不变!(转)
源文件:http://www.cnblogs.com/nyth/archive/2011/06/10/2077868.html 当把数据放在div里面,然后给div设置Scroll显示,在页面刷新后或 ...
- JS刷新页面后滚动条的位置不变
有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...
- sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback
sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...
随机推荐
- Permanent data region free space insufficient to allocate 64792 bytes of memory
TT0802: Database permanent space exhaustedTT6220: Permanent data region free space insufficient to a ...
- java多态简单例子
/* 对象的多态性:动物 x = new 猫(); 函数的多态性:函数重载.重写 1.多态的体现 父类的引用指向了自己的子类对象 父类的引用也可以接收自己的对象 2.多态的前提 必须是类与类之间只有关 ...
- 阿里云centos 7 中tomcat 自启动
这里我的tomcat的安装路径为 /usr/local/tomcat 1 为tomcat添加自启动参数 catalina.sh在执行的时候会调用同级路径下的setenv.sh来设置额外的环境变量,因此 ...
- 使用jxl读取excel内容,并转换成Json,用于Datagrid
一.上传excel文件,得到InputStream,由InputStream得到Jxl中的Workbook,取出内容,存到二维数组中. 1.使用 Jquery Uploadify 插件(http:// ...
- PHP邮件发送
php带有内置的mail() 发送邮件函数,但是较为繁琐:建议上网下载一个PHPMailer:
- 无监督学习(Unsupervised Learning)
无监督学习(Unsupervised Learning) 聚类无监督学习 特点 只给出了样本, 但是没有提供标签 通过无监督学习算法给出的样本分成几个族(cluster), 分出来的类别不是我们自己规 ...
- 结合manage.py,在flask项目中使用websocket模块--- flask-socketio
前言: - 为什么我要使用 flask-socketio模块,而不是flask-sockets? - 因为flask-socketio与前端流行的websocket库socke ...
- 利用pandas生成csv文件
# -*- coding:UTF-8 -*- import json from collections import OrderedDict with open('dns_status.json',' ...
- java.sql.SQLException: The server time zone value 'Öйú±ê׼ʱ¼ 解决方案
//第一个异常 Loading class `com.mysql.jdbc.Driver'. This is deprecated. The new driver class is `com.mysq ...
- 《ArcGIS Runtime SDK for Android开发笔记》——(11)、ArcGIS Runtime SDK常见空间数据加载
ArcGIS Runtime SDK for Android 支持多种类型空间数据源.每一种都提供了相应的图层来直接加载,图层Layer是空间数据的载体,其主要继承关系及类型说明如下图所示: 转载请注 ...