瞎扯淡 请问这个阅读进度条是怎么实现的?

cysh · 2017年09月21日 · 最后由 msl12 回复于 2017年09月27日 · 2676 次阅读

文章不错 😱

前端定时轮询进度,并更新 DOM。后端通过任务 id 找到当前的进度,返回给前端。

你说的是顶部那个阅读进度条吗,红色的那条

zerzerheart 回复

对啊

cysh 回复

我觉得应该是用 js 实现的,监听滚动条滚动事件,获取滚动条的位置,计算出当前位置占页面总高度的百分比。那个进度条就是一个 div,背景是白色的。红色的进度是进度条 div 里嵌套的一个 div,背景是红色的。根据前面计算出来的百分比动态改变红色进度条的 width 属性就行了。

刚刚找到一篇文章讲这个的https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html

这是看了里边 js,实现如下:

function() {
    "use strict";
    function t() {
        var t = $(".blog-content");
        $(".scroll-indicator-container").remove();
        var n = function() {
            var n = e.scrollTop() - t.offset().top
              , i = n / (t.height() - e.height()) * 100;
            $(".scroll-indicator-container .__bar").css({
                width: i + "%"
            })
        };
        if ($(".blog-show").length && $(".post--full").length) {
            var i = $("header nav")
              , r = $('<div class="scroll-indicator-container"><div class="__bar"></div></div>');
            i.append(r),
            n(),
            e.on("scroll", n)
        } else
            e.off("scroll", n)
    }
    {
        var e = $(window);
        $(document)
    }
    $(t)
}();

这个纯 JS 实现的吧,感觉不需要后端...

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册