CSS kaydırma çubuğunu gizlemek için kullanılabilir mi? Bunu nasıl yapardın?

overflow: hidden;Gövde etiketinde şu şekilde ayarlayın :

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

Yukarıdaki kod hem yatay hem de dikey kaydırma çubuğunu gizler.

Yalnızca dikey kaydırma çubuğunu gizlemek istiyorsanız , şunu kullanın overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

Ve yalnızca yatay kaydırma çubuğunu gizlemek istiyorsanız , şunu kullanın overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Not: Kaydırma özelliğini de devre dışı bırakır. Kaydırma çubuğunu gizlemek istiyorsanız, ancak kaydırma özelliğini gizlemek istemiyorsanız aşağıdaki yanıtlara bakın.

WebKit, standart CSS kurallarıyla gizlenebilen kaydırma çubuğu sözde öğelerini destekler:

#element::-webkit-scrollbar {
    display: none;
}

Tüm kaydırma çubuklarının gizlenmesini istiyorsanız,

::-webkit-scrollbar {
    display: none;
}

Geri yükleme konusunda emin değilim - bu işe yaradı, ancak bunu yapmanın doğru bir yolu olabilir:

::-webkit-scrollbar {
    display: block;
}

Tabii ki her zaman kullanabilirsiniz width: 0, bu daha sonra kolayca geri yüklenebilir width: auto, ancak widthgörünürlük tweaks için kötüye bir hayranı değilim .

Firefox 64 artık varsayılan olarak deneysel kaydırma çubuğu genişliği özelliğini desteklemektedir (63 bir yapılandırma işaretinin ayarlanmasını gerektirir). Firefox 64'te kaydırma çubuğunu gizlemek için:

#element {
    scrollbar-width: none;
}

Mevcut tarayıcınızın sözde öğeyi destekleyip desteklemediğini görmek için şu scrollbar-widthsnippet'i deneyin:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Bunun soruya gerçekten doğru bir cevap olmadığını unutmayın, çünkü yatay çubukları da gizler, ancak Google beni burada işaret ettiğinde aradığım şey budur, bu yüzden yine de göndereceğimi düşündüm.)

Evet, biraz ...

"Bir tarayıcının kaydırma çubukları, yalnızca gizli veya kamufle değil, bir şekilde kaldırılabilir mi?" Sorusunu sorduğunuzda, herkes bir tarayıcıdaki tüm tarayıcılardan kaydırma çubuklarını kaldırmak mümkün olmadığından "Mümkün değil" diyecektir. uyumlu ve çapraz uyumlu bir şekilde, ve sonra kullanılabilirliğin tüm argümanı var.

Ancak, web sayfanızın taşmasına izin vermezseniz, tarayıcının kaydırma çubukları oluşturma ve görüntüleme gereksinimi duymasını önlemek mümkündür.

Bu, tarayıcının proaktif olarak bizim için yapacağı davranışı proaktif olarak değiştirmemiz ve tarayıcıya teşekkür etmemiz gerektiği anlamına gelir, ancak teşekkürler dostum. Kaydırma çubuklarını (hepimizin mümkün olmadığını biliyoruz) kaldırmaya çalışmak yerine, kaydırmayı (mükemmel şekilde uygulanabilir) önleyebilir ve yaptığımız ve üzerinde daha fazla kontrole sahip olduğumuz öğeler arasında kaydırma yapabiliriz.

Taşma gizlenmiş bir div oluşturun. Kullanıcı kaydırma yapmaya çalıştığında algıla, ancak tarayıcıların taşma ile kaydırma yeteneğini devre dışı bıraktığımız için algılama: gizli .. ve bunun yerine içeriği JavaScript kullanarak yukarı taşıyın. Böylece tarayıcılar varsayılan kaydırma olmadan kendi kaydırma oluşturmak veya iScroll gibi bir eklenti kullanın .

---

Kapsamlı olmak uğruna; satıcıyı kaydırma çubuklarını işlemenin tüm yolları:

Internet Explorer 5.5 ve sonraki sürümleri

* Bu özellikler hiçbir zaman CSS spesifikasyonunun bir parçası değildi veya hiç onaylanmadı veya tedarikçi ön eki olmadı, ancak Internet Explorer ve Konqueror'da çalışıyorlar. Bunlar, her uygulama için kullanıcı stil sayfasında yerel olarak da ayarlanabilir. Internet Explorer'da "Erişilebilirlik" sekmesinin altında, Konqueror'da "Stil sayfaları" sekmesinin altında bulabilirsiniz.

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Internet Explorer 8'den itibaren bu mülkler Microsoft tarafından önek olarak satılmıştır, ancak yine de W3C tarafından onaylanmamıştır .

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Internet Explorer hakkında daha fazla bilgi

Internet Explorer, scrollkaydırma çubuklarının devre dışı bırakılıp bırakılmayacağını ayarlayan kullanılabilir kılar ; kaydırma çubuklarının konumunun değerini almak için de kullanılabilir.

Microsoft Internet Explorer 6 ve sonraki sürümlerinde, !DOCTYPEbildirimi standartlara uygun modu belirtmek için kullandığınızda , bu özellik HTML öğesi için geçerlidir. Internet Explorer'ın önceki sürümlerinde olduğu gibi standartlara uygun mod belirtilmediğinde, bu öznitelik BODYöğeye değil , HTMLöğeye uygulanır.

.NET ile çalışırken System.Windows.Controls.Primitives, Sunum çerçevesindeki ScrollBar sınıfının kaydırma çubuklarının oluşturulmasından sorumlu olduğunu da belirtmek gerekir .

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN. Temel kullanıcı arayüzü özellikleri
• W3C. Standart olmayan kaydırma çubuğu özellikleri hakkında
• MSDN. .NET ScrollBar Sınıfı

Webkit

Kaydırma çubuğu özelleştirmesiyle ilgili WebKit uzantıları şunlardır:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Bunların her biri ek sözde seçicilerle birleştirilebilir:

• :horizontal - Yatay sözde sınıf, yatay yönlendirmeye sahip kaydırma çubuğu parçalarına uygulanır.
• :vertical - Dikey sözde sınıfı, dikey yönlendirmeye sahip kaydırma çubuğu parçalarına uygulanır.
• :decrement- Azaltma sözde sınıfı düğmeler ve parça parçaları için geçerlidir. Düğmenin veya parça parçasının kullanıldığında görünümün konumunu azaltıp azaltmayacağını belirtir (örneğin, dikey kaydırma çubuğunda yukarı, yatay kaydırma çubuğunda solda).
• :increment- Artış sözde sınıfı düğmeler ve parça parçaları için geçerlidir. Bir düğmenin veya parça parçasının kullanıldığında görünümün konumunu artırıp artırmayacağını belirtir (örneğin, dikey kaydırma çubuğunda aşağı, yatay kaydırma çubuğunda).
• :start- Başlangıç ​​sözde sınıfı düğmeler ve parça parçaları için geçerlidir. Nesnenin başparmağın önüne yerleştirilip yerleştirilmediğini gösterir.
• :end- Son sözde sınıf, düğmeler ve parça parçaları için geçerlidir. Nesnenin başparmaktan sonra yerleştirilip yerleştirilmediğini gösterir.
• :double-button- Çift düğmeli sözde sınıf, düğmeler ve parça parçaları için geçerlidir. Bir düğmenin, bir kaydırma çubuğunun aynı ucunda bulunan bir çift düğmenin parçası olup olmadığını tespit etmek için kullanılır. Parça parçaları için, parça parçasının bir çift düğmeye basıp takmadığını gösterir.
• :single-button- Tek düğmeli sözde sınıf, düğmeler ve parça parçaları için geçerlidir. Kaydırma çubuğunun sonunda bir düğmenin tek başına olup olmadığını tespit etmek için kullanılır. Parça parçaları için, parça parçasının tekli bir düğmeye basıp takmadığını gösterir.
• :no-button - Parça parçalarına uygulanır ve parça parçasının kaydırma çubuğunun kenarına ilerleyip ilerlemediğini gösterir, yani parçanın bu ucunda düğme yoktur.
• :corner-present - Tüm kaydırma çubuğu parçalarına uygulanır ve kaydırma çubuğu köşesinin olup olmadığını gösterir.
• :window-inactive- Tüm kaydırma çubuğu parçalarına uygulanır ve kaydırma çubuğunun bulunduğu pencerenin etkin olup olmadığını gösterir. (Son gecelerde, bu sözde sınıf şimdi :: seçim için de geçerlidir. Herhangi bir içerikle çalışacak şekilde genişletmeyi ve yeni bir standart sözde sınıf olarak önermeyi planlıyoruz.)

Bu kombinasyonlara örnekler

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• Stil Kaydırma Çubukları - Webkit.org

Chrome hakkında daha fazla bilgi

addWindowScrollHandler genel statik İşleyici Kaydı addWindowScrollHandler (Window.ScrollHandler işleyicisi)

  Window.ScrollEvent işleyicisi ekler Parametreler: işleyici - işleyici Döndürür: işleyici kaydını döndürür [ kaynak ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

Mozilla

Mozilla'nın kaydırma çubuklarını değiştirmek için bazı uzantıları vardır, ancak hepsinin kullanılmaması önerilir.

• -moz-scrollbars-none Bunun yerine gizli taşma kullanmanızı tavsiye ediyorlar.
• -moz-scrollbars-horizontal Overflow-x benzer
• -moz-scrollbars-vertical Overflow-y benzer

• -moz-hidden-unscrollableYalnızca dahili olarak bir kullanıcı profili ayarlarında çalışır. XML kök öğelerini kaydırmayı devre dışı bırakır ve web sayfalarını kaydırmak için ok tuşlarını ve fare tekerleğini kullanmayı devre dışı bırakır.

• 'Taşma' ile ilgili Mozilla Geliştirici Dokümanları

Mozilla hakkında daha fazla bilgi

Bu bildiğim kadarıyla kullanışlı değil, ancak kaydırma çubuklarının Firefox'ta görüntülenip görüntülenmeyeceğini kontrol eden özelliğin ( referans bağlantısı ) olduğunu belirtmek gerekir :

• Özellik:        kaydırma çubukları
• Tür:               nsIDOMBarProp
• Açıklama:   Pencerede kaydırma çubuklarının gösterilip gösterilmeyeceğini kontrol eden nesne. Bu özellik JavaScript'te "değiştirilebilir". Sadece oku

Son fakat en az değil, dolgu sihir gibidir.

Daha önce başka bazı cevaplarda da belirtildiği gibi, burada yeterince açıklayıcı bir örnek bulunmaktadır.

Tarih dersi

Merak ettiğim için kaydırma çubuklarının kökenini öğrenmek istedim ve bulduğum en iyi referanslar bunlar.

• Kaydırma ve Kaydırma Çubukları Hakkında 10 Buluş
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Çeşitli

Bir HTML5 spesifikasyon taslağında, seamlessözellik, bir sayfada çevreleyen içerikle harmanlanabilmeleri için iFrames'te kaydırma çubuklarının görünmesini önlemek üzere tanımlanmıştır . Bu öğe en son revizyonda görünmese de.

scrollbarBarProp nesnesi bir çocuk windownesne ve bir kaydırma mekanizması ya da benzeri bir arayüzü konsepti içeren kullanıcı arayüzü elemanını temsil eder. kaydırma çubukları görünürse window.scrollbars.visiblegeri döner true.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

Geçmiş API'sı, sayfa yüklemesinde kaydırma konumunu devam ettirmek için sayfa gezinme sırasında kaydırma geri yükleme özellikleri de içerir.

window.history.scrollRestorationscrollrestoration durumunu kontrol etmek veya durumunu değiştirmek için kullanılabilir (ekleme ="auto"/"manual". Otomatik varsayılan değerdir. Manuel olarak değiştirmek, geliştirici olarak bir kullanıcı uygulamanın geçmişini geçtiğinde gerekli olabilecek kaydırma değişikliklerinin sahipliğini alacağınız anlamına gelir. Gerekirse, history.pushState () ile geçmiş girişlerini iterken kaydırma konumunu takip edebilirsiniz.

---

Daha fazla okuma:

• Wikipedia'da kaydırma çubuğu
• Kaydırma çubuğu (Windows)
• Kaydırma Yöntemi
• Kaydırma Yöntemi - Microsoft Dev Network
• Github'da iScroll (yukarıdaki ilk bölümde referans gösterilmektedir)
• Kaydırma ve Kaydırma Çubukları, Jakob Nielsen tarafından kullanılabilirlik hakkında bir makale

Örnekler

• Vücut kaydırması olmayan bağımsız kaydırma panelleri (sadece CSS kullanarak) - Ben Frain (10-21-2014)

Bunu div, taşması gizlenmiş ve iç öğesi divayarlanmış bir sarıcı ile yapabilirsiniz auto.

İç divkaydırma çubuğunu kaldırmak için, iç divtarafa negatif kenar boşluğu uygulayarak dış görünüm penceresinden dışarı çekebilirsiniz div. Ardından içeriğin görüntülenmesi için iç div öğesine eşit dolgu uygulayın.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

Bu benim için basit CSS özellikleri ile çalışır:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Firefox'un eski sürümleri için şunu kullanın: overflow: -moz-scrollbars-none;

İşte teorik olarak tüm modern tarayıcıları kapsayan çözümüm:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html , kaydırma çubuğunu gizlemek istediğiniz herhangi bir öğeyle değiştirilebilir.

_{Not : Gönderdiğim kodun zaten kapsanıp kaplanmadığını görmek için diğer 19 cevabı kaçırdım ve çoğu mükemmel ayrıntıya girmesine rağmen, 2019'da durduğu gibi tek bir cevap durumu özetlemiyor gibi görünüyor. Bu başka biri tarafından söylendi ve özür dilerim.}

Sanırım hala ilgileniyorsanız, sizin için bir çözüm buldum. Bu benim ilk haftam, ama benim için çalıştı ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Mobil cihazlar için kaydırma çubuğunu gizlemek için bir çözüm arıyorsanız, Peter'ın cevabını takip edin !

İşte yatay kaydırma çubuğunu gizlemek için aşağıdaki çözümü kullanan bir jsfiddle .

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Android 4.0.4 (hem yerel tarayıcıda hem de Chrome'da Ice Cream Sandwich) ile bir Samsung tablette ve iOS 6 (hem Safari'de hem de Chrome'da) bir iPad'de test edildi.

CSS overflowözelliğini kullanın :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

İşte birkaç örnek daha:

• taşma-x, taşma-y testleri
• CSS Taşma Özelliği

Diğer insanların söylediği gibi, CSS kullanın overflow.

Ancak kullanıcının yine de bu içeriği kaydırabilmesini istiyorsanız (kaydırma çubuğu görünmeden) JavaScript kullanmanız gerekir.

Çözüm için cevabımı burada bulabilirsiniz: Fare / klavye ile kaydırmaya devam ederken kaydırma çubuğunu gizle

Peter'ın cevabına ek olarak:

#element::-webkit-scrollbar {
    display: none;
}

Bu, Internet Explorer 10 için aynı şekilde çalışır:

 #element {
      -ms-overflow-style: none;
 }

Kaydırma çubuğunu gizlemek için çapraz tarayıcı yaklaşımı.

Edge, Chrome, Firefox ve Safari'de test edildi

Fare tekerleğiyle hala kaydırma yaparken kaydırma çubuğunu gizle!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

Kaydırmanın çalışmasını istiyorsanız, kaydırma çubuklarını gizlemeden önce bunları şekillendirmeyi düşünün. OS X ve mobil işletim sistemlerinin modern sürümlerinde, bir fare ile kapmak için pratik olmasa da oldukça güzel ve nötr olan kaydırma çubukları vardır.

Kaydırma çubuklarını gizlemek için, John Kurlak'ın bir tekniği, dokunmatik yüzeyleri olmayan Firefox kullanıcılarını, tekerleği olan bir fareye sahip olmadıkları sürece kaydırma yapamayan Firefox kullanıcılarını bırakmak dışında iyi çalışır, ancak o zaman bile genellikle sadece dikey olarak kaydırma yapabilirler .

John'un tekniği üç element kullanır:

• Kaydırma çubuklarını maskelemek için bir dış eleman.
• Kaydırma çubuklarına sahip bir orta öğe.
• Ve hem bir orta elemanın boyutunu ayarlamak hem de kaydırma çubuklarına sahip olmak için bir içerik elemanı.

Dış ve içerik öğelerinin boyutunu yüzdelerin kullanılmasını ortadan kaldıran şekilde ayarlamak mümkün olmalıdır, ancak doğru ayarlamayla çalışmayan başka bir şey düşünemiyorum.

En büyük endişem, tarayıcıların tüm sürümlerinin taşan içeriği görünür hale getirmek için kaydırma çubukları ayarlayıp ayarlamamasıdır. Mevcut tarayıcılarda test ettim, ancak eski tarayıcılarda test etmedim.

Pardon my SASS ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Test yapmak

OS X 10.6.8'dir. Windows, Windows 7'dir.

• Firefox 32.0 Kaydırma çubukları gizlendi. Ok tuşları odaklanmak için tıkladıktan sonra bile kaymaz, ancak fare tekerleği ve izleme dörtgeni üzerindeki iki parmak hareket eder. OS X ve Windows.
• Chrome 37.0 Kaydırma çubukları gizlendi. Ok tuşları odaklanmak için tıkladıktan sonra çalışır. Fare tekerleği ve izleme dörtgeni çalışması. OS X ve Windows.
• Internet Explorer 11 Kaydırma çubukları gizlendi. Ok tuşları odaklanmak için tıkladıktan sonra çalışır. Fare tekerleği çalışır. Pencereler.
• Safari 5.1.10 Kaydırma çubukları gizlendi. Ok tuşları odaklanmak için tıkladıktan sonra çalışır. Fare tekerleği ve izleme dörtgeni çalışması. OS X.
• Android 4.4.4 ve 4.1.2. Kaydırma çubukları gizlendi. Dokunmatik kaydırma çalışır. 4.4.4'te Chrome 37.0, Firefox 32.0 ve HTMLViewer'da (ne olursa olsun) denedim. HTMLViewer'da sayfa, maskelenen içeriğin boyutudur ve kaydırılabilir! Kaydırma, sayfa yakınlaştırma ile kabul edilebilir bir şekilde etkileşime girer.

Sadece bu soruyu okuyan bir başkasına işaret edeceğimi düşündüm ki, öğedeki ayar overflow: hidden(veya taşma-y) bodybenim için kaydırma çubuklarını gizlemedi.

htmlElemanı kullanmak zorundaydım .

Otomatik gizleme , küçük sürüm , yalnızca-y kaydırma veya yalnızca-x gibi bazı seçeneklerle bir WebKit sürümü yazdım :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Kaydırma çubuğunu gizlemek için bu CSS kodunu müşteri koduna kopyalayın:

<style>

    ::-webkit-scrollbar {
       display: none;
    }

    #element::-webkit-scrollbar {
       display: none;
    }

</style>

HTML kodum şöyle:

<div class="container">
  <div class="content">
  </div>
</div>

divKaydırma çubuğunu gizlemek istediğiniz yere ekleyin :

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

Ve bunu kaba ekleyin

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Dikey kaydırma çubuğunu devre dışı bırakmak için eklemeniz yeterlidir overflow-y:hidden;.

Bununla ilgili daha fazla bilgi edinin: taşma .

Cevabım overflow:hidden;jQuery kullanarak bile kayar :

Örneğin, fare tekerleğiyle yatay olarak kaydırın:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

overflowCSS özniteliğiyle manipüle edebileceğinizi düşünüyorum , ancak tarayıcı desteği sınırlı. Bir kaynak, Internet Explorer 5 (ve üstü), Firefox 1.5 (ve üstü) ve Safari 3 (ve üstü) - belki de amaçlarınız için yeterli olduğunu söyledi.

Kaydırma, Kaydırma, Kaydırma iyi bir tartışmaya sahiptir.

Her şeyi denedim ve çözümüm için en iyi olan şey her zaman dikey kaydırma çubuğunu göstermek ve daha sonra gizlemek için bazı negatif kenar boşlukları eklemekti.

body {
  overflow-y: scroll;
  margin-right: -20px;
}