利用本地存储,记录滚动条的位置

在一定时间范围内,用手机微信打开之前浏览过的订阅号的文章,文章显示出来的是你上次阅读到的位置,而不是从头开始显示。手机微信是怎么知道你文章阅读的位置?前端工程师能否实现该功能?

本文主要内容:

1、功能介绍

2、功能分析

3、知识要点

4、具体实现

5、总结

1、功能介绍

为了让大家更清楚的知道今天要学习的效果,先一起来体验一下吧。我们先在手机微信打开HTML5学堂订阅号中的文章,当文章浏览到某一个位置的时候点击左上角返回,然后再次点击刚刚浏览过的那篇文章,显示出来的是你刚才阅读到的位置,而不是从头开始显示,这个用户体验是不是觉得很赞。

效果:

2、功能分析

这个功能的实现并不是很难,当页面滚动时记录页面滚动条的位置并保存到本地存储里面,当你再次打开页面的时候读取本地存储里面的值来设置页面滚动条的位置。具体我们来分析一下。

分析:

1、监听页面滚动条的状态(是否滚动)

2、滚动时获取页面滚动条的位置

3、滚动条的位置保存到本地存储里面

4、页面每次加载的时候获取本地存储里面的值

5、获取到的值来设置页面滚动条的位置

3、知识要点

1、监听页面滚动条的状态(是否滚动)

浏览器监测到滚动条发生滚动时,就会触发scroll事件。

<script type="text/javascript">
    window.addEventListener('scroll', function() {
        console.log('滚动条滚动了');
    }, false);
</script>

tips:页面需要有一定的内容才能出现滚动条,否则触发不了scroll事件。

2、滚动时获取页面滚动条的位置

代码中解决了获取滚动条位置的兼容问题。

<script type="text/javascript">
    window.addEventListener('scroll', function() {
        // 获取滚动条的位置
        var sTop = document.documentElement.scrollTop || document.body.scrollTop;


        console.log(sTop);
    }, false);
</script>

3、滚动条的位置保存到本地存储里面

使用本地存储的setItem方法设置本地存储的值。

<script type="text/javascript">
    var ls = window.localStorage;

    ls.setItem('sTop', 200);
</script>

4、页面每次加载的时候获取本地存储里面的值

先判断本地存储里面是否有记录过页面滚动条的值,如果有则获取本地存储的值,否则不进行操作。

<script type="text/javascript">
    var ls = window.localStorage;


    if (ls.getItem('sTop')) {
        console.log(ls.getItem('sTop', 200));
    } else {
        console.log('抱歉,找不到滚动条的值');
    }
</script>

5、获取到的值来设置页面滚动条的位置

跟获取滚动条位置一样处理了浏览器兼容问题。

<script type="text/javascript">
    if (document.documentElement.scrollTop) {
        document.documentElement.scrollTop = 200;
    } else {
        document.body.scrollTop = 200;
    }            
</script>

4、具体实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 利用本地存储,记录页面浏览器的位置</title>
    <link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset.css" />
    <style type="text/css">
        .wrap {
            padding: 15px 0;
            max-width: 640px;
            margin: 0 auto;
        }
        .wrap > h2 {
            padding: 10px 0;
            color: #39f;
            font-size: 24px;
        }
        .wrap > p {
            line-height: 40px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h2>HTML5学堂官网</h2>
        <p>HTML5学堂,致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料,也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师(利利和堡堡)创建,当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中,主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里,将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站,为您提供最适合您的信息。</p>
        <h2>HTML5学堂微信</h2>
        <p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识,也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造,或许这里没有最牛的技术,但却将HTML5最浅显易懂的表达了出来。</p>
        <h2>摩登足迹微信号</h2>
        <p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
        <h2>HTML5学堂官网</h2>
        <p>HTML5学堂,致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料,也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师(利利和堡堡)创建,当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中,主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里,将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站,为您提供最适合您的信息。</p>
        <h2>HTML5学堂微信</h2>
        <p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识,也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造,或许这里没有最牛的技术,但却将HTML5最浅显易懂的表达了出来。</p>
        <h2>摩登足迹微信号</h2>
        <p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
        <h2>HTML5学堂官网</h2>
        <p>HTML5学堂,致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料,也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师(利利和堡堡)创建,当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中,主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里,将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站,为您提供最适合您的信息。</p>
        <h2>HTML5学堂微信</h2>
        <p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识,也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造,或许这里没有最牛的技术,但却将HTML5最浅显易懂的表达了出来。</p>
        <h2>摩登足迹微信号</h2>
        <p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
    </div>
    <script type="text/javascript">
        var ls = window.localStorage;


        // 页面每次加载的时候获取本地存储里面的值
        if (ls.getItem('sTop')) {
            var oldStop = ls.getItem('sTop');


            // 获取到的值来设置页面滚动条的位置
            if (document.documentElement.scrollTop) {
                document.documentElement.scrollTop = oldStop;
            } else {
                document.body.scrollTop = oldStop;
            }
        } else {
            console.log('抱歉,找不到滚动条的值');
        }


        // 监听页面滚动条的状态(是否滚动)
        window.addEventListener('scroll', function() {
            // 滚动时获取页面滚动条的位置
            var sTop = document.documentElement.scrollTop || document.body.scrollTop;


            // 滚动条的位置保存到本地存储里面
            ls.setItem('sTop', sTop);
        }, false);
    </script>
</body>
</html>

效果:

5、总结

利用本地存储,记录滚动条的位置,主要涉及了两个主要技术点,一个点是滚动条的操作,另外一个点是本地存储的操作。其实,这个功能还可以扩展到Tab切换里面,记录用户点击了哪一个Tab项,下次打开的时候显示上次打开的Tab项。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-12-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

1243
来自专栏各种机器学习基础算法

关于Web语义化的意义

随着现在WEB(网页)的越来越火爆,WEB开发也越来越受人们重视。Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面。...

2946
来自专栏搞前端的李蚊子

css实现视差滚动效果

今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/inde...

4708
来自专栏Android-JessYan

骚年你的屏幕适配方式该升级了!-今日头条适配方案

原文地址: https://www.jianshu.com/p/55e0fca23b4f

1501
来自专栏向治洪

实用Android 屏幕适配方案分享

真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用中,效果还不错。 ? 说起andro...

32410
来自专栏理论坞

统一原则 在网页设计当中的运用

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则:统一和变化,对称和平衡,节奏和...

732
来自专栏老马寒门IT

04-移动端开发教程-在线字体图标

在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其...

2916
来自专栏数据小魔方

Xcelsius(水晶易表)系列16——自定义地图图表

今天继续跟大家分享水晶易表系列关于地图呈现的技巧——自定义数据地图。 该案例主要通过图标模拟与之前学过的动态可见性,根据数据需求,订制动态交互式地图图表。 案...

3446
来自专栏向治洪

实用Android 屏幕适配方案分享

实用Android 屏幕适配方案分享 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用...

5737
来自专栏腾讯社交用户体验设计

浅议内滚动布局 - 腾讯ISUX

1313

扫码关注云+社区