Comment Google crée-t-il ses barres de défilement?

Question

J'étais juste sur http://www.google.com/finance et j'ai remarqué au milieu de la page une barre de défilement impressionnante.

Comment Google crée-t-il cet aspect de la barre de défilement?

Remarque: cette barre de défilement est différente de celle utilisée par Google avec son produit Wave.

Screenshot

MISE À JOUR:

La barre de défilement ne semble pas immédiatement. Ne pas actualiser la page. Laissez la page s'asseoir idéal pendant quelques instants jusqu'à ce qu'il y ait une nouvelle histoire de nouvelles dans le monde. Une fois qu'un nouveau reportage apparaît, le nouvel article fera apparaître la barre de défilement.

Answer 1

Pas que je puisse le voir, mais j'imagine un contrôle personnalisé fait de diverses images. Vous faites une image de piste qui compose les images d'arrière-plan, de haut et de bas pour servir de boutons avant/arrière (avec les états de vol stationnaire et enfoncé) et la commande mobile est généralement en trois parties, deux finales capuchons de chaque côté d'une zone centrale pouvant être inclinée et redimensionnée. Ensuite, vous surveillez les drags sur la zone de contrôle et maintenez-le lié dans la piste, et clique (ou mieux mousedown) sur les boutons avant/arrière.

Il existe des bibliothèques comme jQuery UI Slider qui gèrent cela pour vous si vous ne souhaitez pas le coder vous-même.

Answer 2

Question très intéressante. J'ai juste eu le temps libre et l'ai dépensé pour mettre en application l'exemple simple de ceci (passé environ 1 heure avec une tasse de thé avec des sucreries;)). Regardez ceci:

<script src='jquery.js'></script> 
<script src='jquery-ui.js'></script> 

<style> 
.frame { 
    position: relative; 
    top: 150px; 
    left: 150px; 
    width: 500px; 
    height: 500px; 
    overflow: hidden; 
    border: 1px solid black; 
} 

.frame > div { 
    border: 1px solid black; 
} 

.frame .content { 
    margin-right: 0px; 
    height: 498px; 
    overflow: hidden; 
} 

.frame .scrollbar { 
    float: right; 
    width: 20px; 
    text-align: center; 
} 
.frame .scrollbar .scroller { 
    position: relative; 
    border-right: 1px solid black; 
    width: 10px; 
    height: 91.8%; 
} 
.frame .scrollbar .scroll-up, .frame .scrollbar .scroll-down { 
    cursor: pointer; 
} 
.frame .scrollbar .scroll-up:hover, .frame .scrollbar .scroll-down:hover { 
    background: blue; 
    color: White; 
} 

.frame .scroller-draggable { 
    background: #EEF1F7; 
    border: 1px solid #D5DFF3; 
    height: 20px; 
    margin-left: 1px; 
    margin-right: -10px; 
    cursor: pointer; 
} 
</style> 

<div class="frame"> 
<div class="scrollbar"> 
    <div class="scroll-up">[^]</div> 
    <div class="scroller"> 
    <div class="scroller-draggable"></div> 
    </div> 
    <div class="scroll-down">[v]</div> 
</div> 
<div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, tristique id tristique sed, vulputate eu libero. Nam nec lectus orci, at varius est. Aenean quis velit a lorem bibendum dignissim eu ac ipsum. Vestibulum convallis diam faucibus dolor placerat sed iaculis sapien mattis. Maecenas in velit nec mauris aliquam condimentum. Mauris porttitor magna id est ultrices dapibus. Fusce at urna felis. Quisque congue dignissim bibendum. Praesent egestas elementum ante, non condimentum libero tempor quis. Nullam fermentum tincidunt aliquam. Suspendisse nec mi velit. Nulla facilisi. Etiam vitae sem nec orci feugiat mattis a quis massa. Vivamus rutrum suscipit tempor. Proin varius interdum arcu eget auctor. Vivamus quis placerat nulla. Praesent imperdiet tempus dictum. Donec pharetra, orci ac gravida euismod, sapien tellus feugiat velit, eu egestas nunc nisi at enim. Phasellus blandit placerat neque, non rhoncus tellus commodo sit amet. Donec lectus erat, ornare sit amet venenatis id, viverra ac quam.</p> 
    <p>Sed aliquet metus vitae urna vulputate in mattis orci accumsan. Quisque dictum odio ac massa aliquet porttitor. Donec accumsan tortor sit amet ante vulputate at ullamcorper arcu auctor. Aenean gravida venenatis interdum. Aliquam erat volutpat. Integer eget dui vitae eros iaculis pharetra. In aliquam volutpat tincidunt. Sed vel imperdiet eros. Ut est nunc, venenatis sed varius et, scelerisque quis mi. Nullam aliquam pretium luctus. In hac habitasse platea dictumst. Etiam nec nibh libero. Nam pellentesque accumsan justo eget gravida. Ut egestas, mauris vitae egestas convallis, nibh turpis gravida justo, sit amet tincidunt libero orci eget metus.</p> 
    <p>Praesent convallis pellentesque tristique. Etiam vulputate, arcu sit amet dignissim feugiat, risus nulla adipiscing lectus, in dignissim metus mi iaculis sem. Duis pulvinar vehicula leo nec porta. Cras nisl felis, elementum sit amet commodo sit amet, gravida quis augue. Praesent pretium sapien ut orci rutrum auctor. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed porta mattis cursus. Duis facilisis enim quam, quis imperdiet nulla. Mauris dapibus tincidunt felis vel ultrices. Fusce ut diam lectus. In lacinia ultrices leo, ut fringilla tellus egestas eget. Ut in odio et est tristique tempor quis a orci. Integer sodales adipiscing condimentum. Ut lacinia vehicula tellus sed feugiat. Sed libero libero, vestibulum ut pharetra nec, vestibulum vel augue. Aliquam consequat nibh id nulla porta porta.</p> 
    <p>Nullam ligula tortor, sollicitudin et sollicitudin a, vestibulum vel dui. Ut at facilisis nisi. Duis id ante quis augue iaculis congue. Nulla facilisi. Phasellus tincidunt condimentum nisi, ac ultricies augue ultricies et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id mauris a sapien suscipit adipiscing. Pellentesque accumsan pulvinar tortor et elementum. Nulla facilisi. Nulla tempor lectus et purus luctus ultricies. Phasellus aliquam, libero non ullamcorper vulputate, est lectus ultricies massa, vel tempus magna elit ac lacus. Sed id dui purus. Quisque vel erat ipsum. In in lectus diam, a tempor velit.</p> 
    <p>Duis tincidunt neque quis ipsum feugiat malesuada. Sed et tortor vel nunc porta commodo. Mauris lacinia suscipit sagittis. Praesent non nibh ac elit congue sagittis vitae non dui. Nunc risus urna, sodales faucibus rhoncus at, interdum faucibus velit. Vivamus ultrices neque vehicula turpis luctus non fringilla orci aliquam. Maecenas commodo, est vitae consequat scelerisque, metus sem malesuada dolor, non tincidunt nunc turpis non arcu. Donec rutrum mi nec neque dignissim ac gravida neque dignissim. Quisque porttitor elit a ante ultrices interdum. In tempor neque vitae tellus laoreet tincidunt. Pellentesque bibendum accumsan sapien suscipit vestibulum. Nullam justo libero, consectetur id rhoncus at, vulputate eu tortor. Suspendisse mattis, erat sed viverra malesuada, sapien leo interdum leo, in adipiscing nibh purus quis diam. Sed vitae convallis purus. Maecenas leo mauris, egestas ut vehicula vel, sodales non justo. In consequat scelerisque velit, id pharetra arcu fringilla eget.</p> 
    <p>Phasellus convallis porta velit at tempor. Etiam non quam tortor. Vivamus eget nulla turpis. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sollicitudin arcu quis libero tristique vel tempus turpis eleifend. Fusce sed justo sed sem tempor mattis vel eu nulla. Phasellus hendrerit tellus et dui luctus fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas ullamcorper, dolor eu egestas tincidunt, velit nulla sollicitudin metus, a ultrices nunc diam eu ante. Suspendisse sit amet hendrerit ante. Proin viverra posuere dolor. Nullam blandit lacus quis tortor dignissim non hendrerit risus pharetra.</p> 
</div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $(".frame .scrollbar").find(".scroll-up, .scroll-down").click(function() { 
    var $content = $(this).closest(".frame").children(".content"); 
    var dir = $(this).is(".scroll-up") ? -20 : 20; 
    $content.scrollTop($content.scrollTop() + dir); 
    }); 

    $(".frame .content") 
    .bind("mousewheel", function (e) { 
    $(this).scrollTop($(this).scrollTop() - e.wheelDelta); 
    }) 
    .scroll(function (e) { 
    var $scroller = $(this).closest(".frame").children(".scrollbar").children(".scroller"); 
    var $scrollerDraggable = $scroller.children(".scroller-draggable"); 

    if ($scrollerDraggable.data("isscrolling")) 
    return; 

    var pos = $(this).scrollTop()/($(this)[0].scrollHeight - $(this).height()); 
    console.log([pos]); 
    $scrollerDraggable.css("top", ($scroller.height() - $scrollerDraggable.height()) * pos); 
    }) 

    $(".frame .scroller-draggable").draggable({ 
    axis: 'y', 
    containment: $(".frame .scroller"), 
    start: function() { 
    $(this).data("isscrolling", true); 
    }, 
    drag: function (event, ui) { 
    var $scroller = $(this).closest(".scroller"); 
    var $content = $scroller.closest(".frame").children(".content"); 
    var pos = ui.position.top/($scroller.height() - $(this).height()); 

    $content.scrollTop(($content[0].scrollHeight - $content.height()) * pos); 
    }, 
    stop: function() { 
    $(this).data("isscrolling", false); 
    } 
    }); 
}); 
</script> 

Il requiert l'interface utilisateur JQuery et JQuery, et l'exemple a encore quelques problèmes, mais l'idée principale est réalisée. Exemple testé UNIQUEMENT en Chrome 7. Vous pouvez en faire un plugin jquery.

Answer 3

Bien que d'autres ont indiqué comment cela se fait (et qui était la question, ils sont donc la « bonne » réponse) Je voudrais suggérer une autre réponse ...

Envisager sérieusement pourquoi vous veulent faire

Une barre de défilement serait tout aussi facile d'ajouter en définissant 2 propriétés CSS (par exemple, pas de code requis)

.container{ 
    height:200px;/*some fixed height*/ 
    overflow-y:auto;/*adds a native scrollbar, only when needed*/ 
} 

le problème avec la barre de défilement personnalisée est qu'il ne se comporte pas tout à fait comme un indigène fait.

• Vous ne pouvez pas cliquer sur la piste pour faire défiler le contenu
• Vous ne pouvez pas utiliser la molette de défilement de votre souris pour faire défiler le contenu
• Vous ne pouvez pas utiliser up/vers le bas touches fléchées, maison, fin, page jusqu'à, la page dn pour faire défiler le conte nt
• Le moletée ne change pas de taille pour tenir compte de la quantité de contenu qui peut être défilée

Ceux-ci peuvent ne pas sembler un problème majeur, mais la modification/suppression du « comportement » des contrôles de l'interface utilisateur que les utilisateurs sont habitués n'est généralement pas conseillé.

Citation de Site Usability de Jakob Neilsen "Alertbox" article: "Scrolling and Scrollbars" - 11 Juillet 2005. (Souligné par l'auteur)

Scrollbars sont faciles à obtenir le droit. En fait, moins vous travaillez, meilleure est votre barre de défilement. La facilité d'utilisation est presque toujours améliorée lorsque vous utilisez les barres de défilement intégrées plutôt que de créer la vôtre.