滚动帮手移动网站 [英] Scroll helper for mobile website

问题描述

我有我想帮助移动用户在滚动一个很长的文章页面。对于移动应用很长的名单通常有一种字母索引，可以帮助用户跳转到列表中的各个地方。如何实现这样的事情对于一个Web应用？

I have a very long article page that I want to help mobile users scroll on. For very long lists in mobile apps there's usually a alphabetical index that can help users jump to various places in the list. How do I implement something like that for a webapp?

如果它可以帮助我的筹码是angularjs / jQuery的/ PhoneGap的。

If it helps my stack is angularjs / jquery / phonegap.

推荐答案

如果你想要的东西在手机上很好，我只是写了这个iOS7样式列表导航仪。我认为苹果解决问题的方式非常简单。因此，我们偷。

iOS7 Style List Navigator

If you want something nice on the phone, I just wrote this iOS7 style list navigator. I think the way Apple solved the problem is very straightforward. So we steal it.

这是写考虑，你不会滚动可能身体，因为在许多设计中我已经看到了智能手机，滚动的容器可以让你有固定的页眉和页脚Android和LT; 4不惹毛了。

It's written considering that you won't probably scroll the body, because in the many designs I've seen for smartphones, scrolling a container allows you to have fixed headers and footers for Android < 4 without getting mad.

一句警告：此code是真新鲜和未经考验的。

A word of warning: this code is really fresh and untested.

查阅DEMO和code

#scrolling {
    padding-top: 44px;
    overflow: scroll;
    -webkit-overflow-scroll: touch;
    height: 100%;
}
.menu {
    position: fixed;
    right: 0;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    z-index: 2;
    top: 58px;
}

.list .divider {
    position: -webkit-sticky; /* will stop the label when it reaches the header */
    top: 44px;
}

HTML（摘录）

<div id="scrolling">
<ul class="menu">
    <li><a href="#a">A</a></li>
    <li><a href="#b">B</a></li>
    <li><a href="#c">C</a></li>
    <!-- etc -->
</ul>
<ul class="list">
   <li class="divider" id="a">A</li>
   <li><a href="#">Amelia Webster</a></li>
   <li><a href="#">Andrew WifKinson</a></li>
   <!-- etc -->

使用Javascript（仄/ jQuery的）

$(function() { 
  $(window).on("touchstart touchmove mouseover click", ".menu a", function(e) {
    e.preventDefault();
    clearInterval(t);
    var steps = 25;
    var padding =  68;
    var target = $( $(this).attr("href") ).next("li");
    if ( target.length > 0 ) {
        var scroller = $("#scrolling")[0];
        var step = parseInt((target[0].offsetTop - padding - scroller.scrollTop)/steps);
        var stepno = 0;
            setInterval( function() {
                if ( stepno++ <= steps  ) {
                    scroller.scrollTop += step;
                } else {
                    clearInterval(t)
                }
            }, 20);
    };
  });
});

在尝试滚动之前执行链接有效性的基本检查。你可以改变填充您的需求。

It performs a basic check of link validity before attempting the scroll. You can change padding to your needs.

此外，你会发现，我们所需要的目标瞄准后的第一个元素。这是因为Safari浏览器似乎去，因为粘定位螺母。

Also, you will notice that we are targeting the first element after the required target. This is because Safari seems to go nuts because of the sticky positioning.

这code使用jQuery /的Zepto选择了简洁和可读性的缘故。但是，这些库是不是真的需要达到的结果。只需一点点额外的digitation你可以轻松地去依赖免费。

This code uses jQuery/Zepto selectors for the sake of brevity and readability. But these libraries are not really needed to achieve the result. With just a little extra digitation you could easily go dependency-free.

的http：//$c$cpen.io/frapporti/pen/GtaLD

这篇关于滚动帮手移动网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！