思想: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. Red–black tree ---reference wiki

    source address:http://en.wikipedia.org/wiki/Red%E2%80%93black_tree A red–black tree is a type of sel ...

  2. 从零实现一个简易jQuery框架之一—jQuery框架概述

    我们知道,不管学习任何一门框架,了解其设计的理念.目的.总体的结构及核心特性对我们使用和后续的深入理解框架都是有很大的帮助的.因此在这里先梳理一下本人对jQuery框架的一些理解. 设计目的(为什么要 ...

  3. 转帖:kindeditor编辑区空格被隐藏,导致所见所得不一致的解决办法

    1.修改kindereditor-all.js中的 var re = /(\s)<(/)?([\w-:]+)((?:\s+|(?:\s+[\w-:]+)|(?:\s+[\w-:]+=[^\s&q ...

  4. 深入理解JavaScript系列(37):设计模式之享元模式

    介绍 享元模式(Flyweight),运行共享技术有效地支持大量细粒度的对象,避免大量拥有相同内容的小类的开销(如耗费内存),使大家共享一个类(元类). 享元模式可以避免大量非常相似类的开销,在程序设 ...

  5. git clone时的各种报错汇总

    npm ERR! path E:\aawork\1work\2019.2\package.json 没有在项目路径下 npm ERR! missing script: dev 需要 vue init ...

  6. java版两人聊天程序

    server.java import java.io.*; import java.net.*; import java.text.SimpleDateFormat; import java.util ...

  7. JavaScript获取url参数

    声明:以下内容转自网络 方法一 String.prototype.getUrlString = function(name) { var reg = new RegExp("(^|& ...

  8. Javaweb的get请求乱码解决

    get方式请求:即将参数放在URL中,因此这就涉及到URL的编码了 方式一:[推荐] 方式二: 前端编码: encodeURI(encodeURI("")) 后端解码: java. ...

  9. vue——组件

    一.组件概念 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. // 定义一个名为 button-coun ...

  10. SQLAlchemy的使用---增删改查

    #通过SQLAlchemy对数据库进行增删改查 # 想要操作数据库 先要打开数据库连接 from create_table import engine # 创建会话 - 打开数据库连接 from sq ...