思想: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滚动条在页面刷新 滚动条位置固定的更多相关文章

  1. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  2. JavaScript实现页面刷新滚动条位置不变(利用cookie)

    实验环境:vs2015 asp.net(C#) 主要原理: 1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos], 2.页面刷新或重载时查询cookie[pos]中的值是否存在,若 ...

  3. 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  4. JQuery实现页面刷新滚动条自动滚动到特定位置

    var cotentOffset = $('#6f').offset(); $('.info_box').animate({ scrollLeft: cotentOffset.left }, ); 原 ...

  5. JS控制div跳转到指定的位置的解决方案总结

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...

  6. JS实现div块的拖放,调换位置

    主要是HTML5 的拖放(Drag 和 Drop) 例子(不需要对div设置ID): <!DOCTYPE HTML> <html> <head> <scrip ...

  7. asp.net页面刷新或者回发后DIV的滚动条位置不变!(转)

    源文件:http://www.cnblogs.com/nyth/archive/2011/06/10/2077868.html 当把数据放在div里面,然后给div设置Scroll显示,在页面刷新后或 ...

  8. JS刷新页面后滚动条的位置不变

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...

  9. sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback

    sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...

随机推荐

  1. springsource-tool-suite下载(sts)

    1 新版本的插件下载 1 直接进入官网下载即可 官网地址:http://spring.io/tools/sts/all. 2 spring官网上下载历史版本的spring插件 1 获取新版本的插件的地 ...

  2. java Folder transform to Source Folder

    右键文件夹然后选择Build Path ===>Use as Source Folder 里面的东西现在就可以编译了 然后想要让一个源码包变成一个文件夹的话: 只需要再次右键源码包==>选 ...

  3. HZAU 18——Array C——————【贪心】

    18: Array C Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 586  Solved: 104[Submit][Status][Web Boar ...

  4. 创建Django项目时,settings的静态文件的配置

    STATICFILES_DIRS = ( os.path.join(BASE_DIR,'static'), )

  5. Java根据byte数组,生成文件

    原文出自:https://blog.csdn.net/seesun2012 根据byte数组,生成文件 自己写的小案例,找个地方记录一下 package com.seesun2012.utils; i ...

  6. python调用其他文件的类和函数

    在同一个文件夹下 调用函数 source.py文件: def func(): pass new.py文件: import source # 或者 from source import func 调用类 ...

  7. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  8. Eclipse Configuration

    *** Date: 2013年9月12日星期四中国标准时间上午8时41分50秒 *** Platform Details: *** System properties:applicationXMI=o ...

  9. 【Linux】Core dump故障分析

    引入: Q:如果一个程序运行3天后才会出错,这个时候难道需要我们一直用GDB调试程序3天吗? A:答案当然是否定的. 我们有更厉害的工具--Core dump 一.Coredump定义 Core Du ...

  10. Daily paper -Science 2006: Experimental Study of Inequality and Unpredictability in an Artificial Cultural Market (探究群体行为对商品销量的影响)

    论文:      Experimental Study of Inequality and Unpredictability in an Artificial Cultural Market 发表期刊 ...