Web 应用程序中的 iPhone 风格滚动条，具有自动淡入/淡出功能

Question

我正在制作一个网络应用程序，并且非常喜欢自动淡入和淡出的 iPhone 风格的滚动条。我以前只在iOS产品上见过它，但现在Facebook似乎已经在Chat联系人列表中实现了它。

为什么我这么喜欢它？它会自动淡入和淡出，因此不那么引人注目，并且可以节省大量空间。当它显示时，它实际上位于 div 内部，而不是围绕它，再次有效地利用了空间。

关于如何做到这一点有什么想法吗？它不是 Matteo Spinelli 的“iScroll”，它采用“正常”滚动条（对于 iOS 产品来说当然是 iOS 风格）在 div 上使用。

我尝试使用 Jonathan Azoff 的 Overscroll Jquery 插件，但我似乎无法让它完全正常工作。我设法让滚动条在 mouseenter 上自动淡入和淡出（就像 Facebook 所做的那样），但浏览器之间的滚动行为有所不同（并且似乎在 OSX 上的速度和惯性方面覆盖了浏览器的滚动行为）。快速浏览一下源代码似乎与这个结论是一致的。

是否有其他插件/库可以用来精确维护浏览器的滚动行为，但滚动条可以自动淡入和淡出，并且看起来像 iOS 风格？

编辑：决定自己做。请参阅下面的答案。

Answer 1

抱歉，您花了这么长时间才得到这么简单问题的答案...这接近我认为您正在寻找的内容 http://baijs.nl/tinyscrollbar/。然后，对于淡出，只需使用这样的简单函数即可。

首先是 HTML

<div id="scrollbar1" style="visibility: hidden">
    <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
    <div class="viewport">
        <div class="overview">
            <h3>Magnis dis parturient montes</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.</p>

            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.</p>

            <p>Vivamus sed tellus quis orci dignissim scelerisque nec vitae est. Duis et elit ipsum. Aliquam pharetra auctor felis tempus tempor. Vivamus turpis dui, sollicitudin eget rhoncus in, luctus vel felis. Curabitur ultricies dictum justo at luctus. Nullam et quam et massa eleifend sollicitudin. Nulla mauris purus, sagittis id egestas eu, pellentesque et mi. Donec bibendum cursus nisi eget consequat. Nunc sit amet commodo metus. Integer consectetur lacus ac libero adipiscing ut tristique est viverra. Maecenas quam nibh, molestie nec pretium interdum, porta vitae magna. Maecenas at ligula eget neque imperdiet faucibus malesuada sed ipsum. Nulla auctor ligula sed nisl adipiscing vulputate. Curabitur ut ligula sed velit pharetra fringilla. Cras eu luctus est. Aliquam ac urna dui, eu rhoncus nibh. Nam id leo nisi, vel viverra nunc. Duis egestas pellentesque lectus, a placerat dolor egestas in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae ipsum non est iaculis suscipit.</p>

            <h3>Adipiscing risus </h3>
            <p>Quisque vel felis ligula. Cras viverra sapien auctor ante porta a tincidunt quam pulvinar. Nunc facilisis, enim id volutpat sodales, leo ipsum accumsan diam, eu adipiscing risus nisi eu quam. Ut in tortor vitae elit condimentum posuere vel et erat. Duis at fringilla dolor. Vivamus sem tellus, porttitor non imperdiet et, rutrum id nisl. Nunc semper facilisis porta. Curabitur ornare metus nec sapien molestie in mattis lorem ullamcorper. Ut congue, purus ac suscipit suscipit, magna diam sodales metus, tincidunt imperdiet diam odio non diam. Ut mollis lobortis vulputate. Nam tortor tortor, dictum sit amet porttitor sit amet, faucibus eu sem. Curabitur aliquam nisl sed est semper a fringilla velit porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in sapien id nulla volutpat sodales ac bibendum magna. Cras sollicitudin, massa at sodales sodales, lacus tortor vestibulum massa, eu consequat dui nulla et ipsum.</p>

            <p>Aliquam accumsan aliquam urna, id vulputate ante posuere eu. Nullam pretium convallis tincidunt. Duis vitae odio arcu, ut fringilla enim. Nam ante eros, vestibulum sit amet rhoncus et, vehicula quis tellus. Curabitur sed iaculis odio. Praesent vitae ligula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis, nunc non laoreet mollis, neque est mattis nisl, nec accumsan velit nunc ut arcu. Donec quis est mauris, eu auctor nulla. Fusce leo diam, tempus a varius sit amet, auctor ac metus. Nam turpis nulla, fermentum in rhoncus et, auctor id sem. Aliquam id libero eu neque elementum lobortis nec et odio.</p>                             
        </div>
    </div>
</div>

，然后是 jQuery 函数使其淡出和淡入：

$(function() {  
     $("#scrollbar1").bind('hover', function() {
          // On hover fade in
          $(this).fadeIn(1000);
     });
     $("#scrollbar1").bind('mouseout', function() {
          // On mouseout fade out
          $(this).fadeOut(1000);
     });
});

Answer 2

谢谢您的意见，孙子。我看过tinyscroll，它相当不错，但我认为它还不够完美。特别是，在 Firefox（在我的 MacBook 上）中，我失去了平滑滚动的能力（并且滚动最终以离散/量化的量进行）。快速浏览一下代码表明这是由于他们手动处理输入事件并根据这些事件调用滚动的方式造成的。我真的很想保留绝对本机的滚动性能和行为。

所以我编写了自己的 jQuery 插件，innerscroll。我已经在 github 上开源了它。 此处也提供了演示。只需包含我的文件并添加 3 行代码：

$('#content').innerscroll({
    destination: $('#wrapper')
});

其中 content 是溢出的元素。一些小的额外设置是，您需要为 content 创建一个父元素 wrapper ，其尺寸几乎相同，但宽度稍小（以隐藏 content code> 的本机滚动条）。 wrapper 也是放置新的淡入淡出滚动条的位置。

我确信存在错误。任何意见、批评或建议将不胜感激。

Answer 3

我发现 Nanoscroller JS 是支持这种风格的最可靠的滚动条替代品。 http://jamesflorentino.github.com/nanoScrollerJS/