CSS ile kaydırma çubuğu konumu nasıl değiştirilir?

CSS ile kaydırma çubuğunun konumunu soldan sağa veya aşağıdan yukarıya değiştirmenin bir yolu var mı?

html css scrollbar

— Mohsen Safari
kaynak

Tarayıcınızın kaydırma çubuğu?

— Awais Umar

bu eklentiyi deneyin jscrollpane.kelvinluck.com Bu jquery eklentisi, kaydırma çubuğunda özel css yapmanıza izin verecektir.

— Awais Umar

Aklıma gelen tek şey, istediğiniz gibi konumlandırmak için özel bir kaydırma çubuğuna ve stile sahip olmaktır. @AwaisUmar tarafından önerilen jscrollpane eklentisi geçmişte kullandığım bir şey ve oldukça iyi bir başlangıç.

— Zhihao

Daha ziyade tüm tarayıcılar, ancak belirli bir tarayıcı hakkında bilginiz varsa bize bildirin

— Mohsen Safari

Bunu saf CSS ile yapmanın bir yolu yok.

— 2013

Yanıtlar:

125

Yalnızca CSS kullanarak:

Sağ / Sol Flippiing: Çalışma Keman

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Üst / Alt Çevirme: Çalışma Keman

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

— Avrahamcool
kaynak

Üst / Alt Çevirme kemanında divChrome 29'da çevrilmiş bir üst kaydırma çubuğu görmüyorum .

— Mathijs Flietstra

Görünüşe göre, bu bir tarayıcı hatası . Cevapta Fiddle'ımı güncelledim. şimdi kontrol et.

— avrahamcool

Google Chrome 35.0.1916.153'te iki kez döndürdüğümde girişler / seçimle ilgili bazı sorunlar oluyor. FF'de her şey yolunda gidiyor.

— lechup

@lechup bir keman gönderebilir misin? yardım etmeye çalışacağız.

— avrahamcool

Az önce bir hata keşfettim (Edge'de). Çevrilen içerik, satırlarının her birinde onay kutuları olan bir tablo içeriyorsa, işaretçi olayları karışacaktır. Son onay kutusunu seçerseniz, ilkini seçer ve bunun tersi de geçerlidir. Bak fiddle jsfiddle.net/uPwfn/646

— James Cazzetta

Burada başka bir yol ile, olduğu rotating elementile scrollbariçin 180deg,sarma bu kadar contentbaşka bir öğe haline ve rotatingo wrapperiçin -180deg. Aşağıdaki pasajı kontrol edin

Kod parçacığını göster

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 15px;
}
#vertical {
  direction: rtl;
  overflow-y: scroll;
  overflow-x: hidden;
  background: gold;
}
#vertical p {
  direction: ltr;
  margin-bottom: 0;
}
#horizontal {
  direction: rtl;
  transform: rotate(180deg);
  overflow-y: hidden;
  overflow-x: scroll;
  background: tomato;
  padding-top: 30px;
}
#horizontal span {
  direction: ltr;
  display: inline-block;
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=vertical>
  <p>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content</p>
</div>
<div id=horizontal><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
</div>

Snippet'i genişlet

— Süreç
kaynak

Akıllıca, ancak en azından Linux firefox'umda, işleyicinin ve kaydırma çubuğunun iç / dış efektlerini değiştirmenin yan etkisine sahip; ki bu çok kafa karıştırıcı.

— Martin Tournoij

şu ansower stackoverflow.com/questions/7889449/… bakın

— shaddad

@Carpetsmoker evet, rtlve ltryönü sabit . Böylece, yerel kaydırma efekti, scroll-down aşağıya ve yukarıya scroll-updoğru

— Süreç

Evet, dikey için sabit ama yatay değil.

— Martin Tournoij

Bunu deneyin. Bu yardımcı olur umarım

<div id="single" dir="rtl">
    <div class="common">Single</div>
</div>

<div id="both" dir="ltr">
    <div class="common">Both</div>
</div>



#single, #both{
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: 0 auto;
    border: 1px solid gray;
}


.common{
    height: 150px;
    width: 150px;
}

— Piyush Arya
kaynak

diryeni bir şey öğrendikten sonra akıllıca bir fikir , ama benim de yukarıdan aşağıya ihtiyacım vardı

— Endless