网页并不是分页的,你可以使用手指来滚动。可你是如何知道浏览到哪里了呢?

在今天的Hacker News上,我发现一两个(The New Republic uses something like this in a cool way. As you scroll down the ...I use this on my site.. but for a different reason. Showing scroll location on v...)这样的讨论,在你阅读时给出一个显示你进度的指示器。看上去就像下面这样:

这很漂亮,但是这种转换并不好,进度条是横的,但你肯定是竖着阅读的呀。这是一种错误的自然映射(Natural mapping (interface design))。你往下滚,而进度条是横的,这很不合理。

Kindle等一些电子阅读器也有类似的进度条,在屏幕的底部,显示你的阅读进度,横条上还有章节的标记。

在电子阅读器中,这种进度条是合理的,有明确页的概念,尽管这些页可能会重排。但你并不是纵向地浏览它们。翻页是横向的,所以横向的进度条没问题,且符合自然映射。

就是如此,几十年了,在Web领域我们已经有了一个纵向的进度条,它的学名叫滚动条,你应该听说过。

你可能会说:

本啊,文章下面的评论怎么办,有时候评论甚至是文章的两倍长,不应该将其刨除么?

对,这很随机,而且有种很简单的方式来处理这个问题!

把非文章的内容隐藏起来,直到用户滚动到那里。你已经有进度条了,从八十年代起所有人都在用(好吧,可能不是每个人)。

你会问:

这该如何实现啊?

很简单:(提醒下,这段代码没测试过!)

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

var commentsElement = $('#comments');
$(window).scroll(function() {
    if(isScrolledIntoView(commentsElement)) {
        commentsElement.show();
    } else {
        commentsElement.hide();
    }
});

随机情况又出现了:

本,使用iOS或者OS X的用户怎么办,用户不滚动的时候,滚动条会隐藏起来。

不滚动就隐藏,我真心觉得这很恶心。他们最起码应该提供几像素做一个可见的提示。唉,只有苹果自己明白。

有种替代方案,就是忽略iOS和OS X用户,不过着不太好吧。要不然你就使用滚动条类库,有很多,比如说jQuery NiceScroll plugin

或者,你可以自己做一个指示器,就如本文开始提到的。就是别用横向的指示器来处理纵向的过程。

一篇文章被分成了很多页,又怎么办?

这,你可能碰到了更大的问题,在网页中一篇文章就不应该被分成多页!我们有一块无限的地方让你写,还有一种高雅的方式浏览它,为毛还要分页?

为了广告!

是不是还有其他的变现方式,没必要强制分页将广告甩在用户脸上吧?

原文:Stop reinventing the scrollbar

0
推荐阅读