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中,如果当前页面的篇幅 ...
随机推荐
- TOJ 2888 Pearls
Description In Pearlania everybody is fond of pearls. One company, called The Royal Pearl, produces ...
- 如何优雅地使用httprunner进行接口测试
一天,你的领导X要你对某接口做测试,你一听,接口测试,高大上.用什么做好呢?postman?jmeter?loadrunner?balabala...优秀的你,想到了一大堆工具,当然也包括用pytho ...
- newInstance和new的区别(good)
从JVM 的角度看,我们使用关键字new创建一个类的时候,这个类可以没有被加载.但是使用newInstance()方法的时候,就必须保证:1.这个 类已经加载:2.这个类已经连接了.而完成上面两个步骤 ...
- HashTable 元素的查找
Hashtable 特点:键与值成对存在,键是唯一的,不能重复.在查找元素的时候,我们往往是依据键区查找值的 三种方法 contains 包含 containsKey containsValue ...
- Java ConcurrentHashMap的小测试
今天正式开始自己的分布式学习,在第一章介绍多线程工作模式时,作者抛出了一段关于ConcurrentHashMap代码让我很是疑惑,代码如下: public class TestClass { priv ...
- Java Socket, DatagramSocket, ServerSocketChannel io代码跟踪
Java Socket, DatagramSocket, ServerSocketChannel这三个分别对应了,TCP, udp, NIO通信API封装.JDK封装了,想跟下代码,看下具体最后是怎么 ...
- Javascript: hash tables in javascript
/** * Copyright 2010 Tim Down. * * Licensed under the Apache License, Version 2.0 (the "License ...
- iOS Touch ID 简易开发教程
转自:NsstringFromName 支持系统和机型 iOS系统的指纹识别功能最低支持的机型为iPhone 5s,最低支持系统为iOS 8,虽然安装iOS 7系统的5s机型可以使用系统提供的指纹解锁 ...
- network embedding 需读论文
Must-read papers on NRL/NE. github: https://github.com/nate-russell/Network-Embedding-Resources NRL: ...
- Scope_Pre_Post
@Scope , 设置bean的生命周期,示例: @Scope(value="prototype")//设置生存范围,一般用 singleton或prototype 14.@P ...