HTML/CSS/JavaScript ile özel kaydırma çubuğu görselleştirme

Question

Özel bir kaydırma çubuğuyla denemek istediğim çok özel bir uygulama oluşturuyorum.

İdeal olarak, yerleşik kaydırma çubuğunu devre dışı bırakıp kendim çizerim. Sayfa, başka herhangi bir sayfa gibi görünecek ve hissedilecek, sadece kaydırma çubuğu görünmeyecek. Ok tuşları, kaydırma tekerleği ve sayfanın kaydırılmasının diğer herhangi bir anlamı, web sunucumun çalıştığı platformun dışında çalışmalıdır.

bir yolu Bu yaklaşımla top: 0; bottom: 0; width: 100%; overflow: hidden; ile kesinlikle konumlandırılmış bir sarıcı div içerik koymak olacaktır, ben klavyeye dinleyerek, kendim kaydırma yeniden uygulamak ve tekerlek olayları kaydırmak zorunda olacaktır. Bu pek de ideal değildir, özellikle sayfa yukarı ve sayfa aşağı davranışını çoğaltmak zor olacaktır. Bir sayfada aşağıya kaç piksel kaydırmalıyım? Sayı platformdan platforma değişir. Sihirli fare "hızlanan" kaydırmalar da çoğaltmak zor olacağını düşünüyorum.

Bu özel kaydırma çubuğu görselleştirmesinin uygulanmasındaki seçeneklerim nelerdir?

Not: Ben özel kaydırma çubukları ve kullanılabilirlik konusunda yapılan araştırmaların farkındayım. Bu konuya dikkat etmelisiniz, acı çekiyorum bunun farkındayım :) Sadece kaydırma çubuğunu yeniden boyamaktan bahsetmiyorum. Bir film editörü veya bir müzik sıralayıcısı açısından daha fazla düşünün. Çok özel ve özel şeyler.

Güncelleme:http://augustl.com/blog/2010/custom_scroll_bar_native_behaviour

Answer 1

javascript ve css kullanarak potansiyel bir çözümdür. Bu fikir, kaydırma çubuğunu kaldırmak değil, bunun yerine gizlemek ve işini yapmaya devam etmektir.

Konsept: Burada

gerçek içeriğinin kaydırma sarmalayıcı dışında itti edilmektedir. Bu, görünmesini engeller (sarıcı overflow:hidden;'a sahiptir) ancak çalışmasını engellemez.

 
|---------WRAPPER-----------| 
||--------CONTENT-----------|---| 
||       |[^]| 
||       |[0]| 
||       |[0]| 
||       |[ ]| 
||       |[ ]| 
||       |[v]| 
||--------------------------|---| 
|---------------------------| 

Uygulama:

işaretleme:

<div class="wrapper"> 
    <div class="content"> 
    <p>1Hello World</p> 
    <p>2Hello World</p> 
    ... 
    </div> 
</div> 

Ve komut dosyası (Jquery kullandım, ancak kolayca saf javascript yeniden yazılması gereklidir.):

$(function() { 
    // initialize: both need to have the same height and width (width default: 100%) 
    // these could go on your stylesheet of course. 
    $("div.wrapper").css({ height: "200px", overflow: "hidden" }); 
    $("div.content").css({ height: "200px", overflow: "auto" }); 

    // now extend the content width beyond the wrapper 
    $("div.content").width($("div.content").width() + 22); // 22px is the width of IE scrollbars 

    // prevent highlight dragging from scrolling the wrapper div (thereby displaying the bars) 
    $("div.wrapper").scroll(function() { 
    this.scrollLeft = 0; 
    this.scrollTop = 0; 
    }); 

    $("div.content").scroll(function() { 
    // update custom scrollbar display using this.scrollTop as a percentage of this.clientHeight 
    // alert("Place slider at " + ((100 * this.scrollTop)/this.clientHeight) + "%!"); 
    }); 
}); 

And here it is working (Yine de bir özelliğim yok kaydırma çubuğu ekranı).

Answer 2

Bu son derece uzmanlaşmış bir şeydir çünkü sanırım kendi olayı uygulamaktır arasında

:-) kullanılabilirlik hakkında Farkındayım tek şey konuşmak gerek yoktur yakalama - tuşa basma, mousedown vb. - sayfanın şu anki konumunu elde etmek kolay olmalıdır (sanal tür - herşeyi yükleyeceğinizden ve yalnızca "viewport" u değiştireceğinizden).

Çok büyük bir QuirksMode öğreticiler ve belgeler kontrol tavsiye

:

• Tuşa basma olaylar: http://www.quirksmode.org/js/keys.html

• Fare olaylar: http://www.quirksmode.org/js/events_mouse.html

tekerleği kaydırma konusunda emin değilim, gerçi - Bunu taklit edecek teknik hakkında bir şey duymadım ama kesinlikle bir şey bulabilir veya kodlayabilirsiniz.

DÜZENLEME: (tekerleği tıklayın) kaydırma tekerleği bazı düşük seviyeli JS uygulanmasını bulduk: İşte http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel