码迷,mamicode.com
首页 > Web开发 > 详细

js实现div滚动条在页面刷新 滚动条位置固定

时间:2016-08-24 12:56:50      阅读:438      评论:0      收藏:0      [点我收藏+]

标签:

思想: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滚动条在页面刷新 滚动条位置固定

标签:

原文地址:http://www.cnblogs.com/WarBlog/p/5802056.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!