yatay masa üzerinde üst ve alt kaydırma çubuğu | Netgez.com
SORU
14 EKİM 2010, PERŞEMBE


yatay masa üzerinde üst ve alt kaydırma çubuğu

Sayfamda çok geniş table verdim. Masanın altına yerleştirilen bir yatay kaydırma çubuğu koymaya karar verdim. Ama bu kaydırma çubuğunu masanın üstüne de olmak istiyorum.

Åžablon ettiÄŸim ÅŸu:

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">

Bu HTML ve CSS ile yapmak mümkün olabilir mi?

CEVAP
14 EKİM 2010, PERŞEMBE


Bir unsur, "" yatay kaydırma olan unsur yukarıda div, sadece bir kaydırma çubuğu için yeterince yüksek. kukla koy üstüne de ikinci bir yatay kaydırma çubuğu taklit Sonra da "ya kaydırma çubuğu hareket ettiğinde. synch diğer elemanı almak için" kukla öğe ve asıl öğe için olay, kaydırma işleyicileri eklemek Kukla elemanı eleman üzerinde ikinci bir yatay kaydırma çubuğu gibi görünecektir.

Canlı bir örneğin, this fiddle bkz

İşte kod:

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

CSS:

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JS:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

Bunu PaylaÅŸ:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • 24 Канал

    24 КанаÐ

    5 ÅžUBAT 2006
  • FPSRussia

    FPSRussia

    19 NİSAN 2010
  • Menglong Tav

    Menglong Tav

    18 Temmuz 2010