思想: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. Hadoop Yarn REST API未授权漏洞利用挖矿分析

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 一.背景情况 5月5日腾讯云安全曾针对攻击者利用Hadoop Yarn资源管理系统REST API未授权漏洞对服务器进行攻击,攻击者可以在未 ...

  2. Python 进阶

    高阶函数 定义 函数接受的参数是一个函数 函数的返回值为一个函数 满足以上2点中其中一个就是高阶函数 函数嵌套 定义 函数中def定义一个函数 嵌套会存在闭包, 其他情况不会有闭包(闭包闭的是变量) ...

  3. 【转载】Web 研发模式演变

    一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发.页面由 JSP.PHP 等工程师在服务端生成,浏览器负责展现.基本上是服务端给什 ...

  4. mvc 页面简单get获取后台数据

    后台方法 public ActionResult Linq() { var lt = UserSys.FindAll(); Hashtable ht = new Hashtable(); ht.Add ...

  5. 针对在webview模式中,小米魅族手机不支持html5原生video的control的解决办法![原创]

    其实,解决办法就是,重新写个control控制功能,.同样用流行的video.js可以实现 第一步就是增加个播放的图片..要不然没有按钮多难看! <div class="videoDi ...

  6. npm安装gulp-sass失败处理办法

    最近在做一个基于gulp的前端自动化的项目,在github上拉取代码后,按照正常的流程,首先我们要 npm  install ,在安装的过程中,一直提示我gulp-sass 安装失败,我用尽了好多办法 ...

  7. js之strict模式

    JavaScript在设计之初,为了方便初学者学习,并不强制要求用var申明变量.这个设计错误带来了严重的后果:如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量: i = 10 ...

  8. easyui datagrid 获取行数据某个字段

    首先要能获取datagrid 的row对象 即:var row = $('#datagrid').datagrid('getData').rows[index]; 之后我们就可以通过类似row.nam ...

  9. js数组插入指定位置元素,删除指定位置元素,查找指定位置元素算法

    将元素x插入到顺序表L(数组)的第i个数据元素之前 function InsertSeqlist(L, x, i) { // 将元素x插入到顺序表L的第i个数据元素之前 if(L.length == ...

  10. Android之自定义(上方标题随ViewPager手势慢慢滑动)

    最近很蛋疼,项目要模仿网易新闻的样式去做.上次把仿网易新闻客户端的下拉刷新写出来了,这次是ViewPager的滑动,同时ViewPager的上面标题下划线跟随者移动,本来通过ViewPager的OnP ...