Kaydırma çubuğunu gizle, ancak yine de kaydırma yapabilir

Kaydırma çubuğu gösterilmeden tüm sayfa boyunca kaydırma yapabilmek istiyorum.

Google Chrome'da:

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

Ancak Mozilla Firefox ve Internet Explorer böyle çalışmıyor.

Ayrıca bu CSS denedim:

overflow: hidden;

Bu kaydırma çubuğunu gizler, ancak artık kaydırma yapamıyorum.

Tüm sayfayı kaydırmaya devam ederken kaydırma çubuğunu kaldırmamın bir yolu var mı?

Sadece CSS veya HTML ile lütfen.

Sadece iyi çalışan bir test.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Çalışma keman

JavaScript:

Kaydırma çubuğu genişliği farklı tarayıcılarda farklılık gösterdiğinden, JavaScript ile işlemek daha iyidir. Bunu yaparsanız Element.offsetWidth - Element.clientWidth, tam kaydırma çubuğu genişliği görünecektir.

JavaScript Çalışma Kemanı

Veya

Kullanmak Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Çalışma keman

JavaScript Çalışma Kemanı

Bilgi:

Bu cevaba dayanarak, basit bir kaydırma eklentisi oluşturdum .

WebKit'te isteğe bağlı stil ile kolaydır:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

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;

GÜNCELLEME:

Firefox artık CSS ile kaydırma çubuklarının gizlenmesini desteklediğinden, tüm büyük tarayıcılar artık kapsanmaktadır (Chrome, Firefox, Internet Explorer, Safari vb.).

Kaydırma çubuklarını kaldırmak istediğiniz öğeye aşağıdaki CSS'yi uygulamanız yeterlidir:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

Bu, şu anda farkında olduğum en az hacky çapraz tarayıcı çözümüdür. Demoyu inceleyin.

ORİJİNAL CEVAP:

İşte henüz bahsedilmeyen başka bir yol. Gerçekten basittir ve sadece iki div ve CSS içerir. JavaScript veya tescilli CSS gerekmez ve tüm tarayıcılarda çalışır. Kabın genişliğinin de açıkça ayarlanmasını gerektirmez, böylece kabı akışkan hale getirir.

Bu yöntem, kaydırma çubuğunu üst öğeden çıkarmak için negatif bir kenar boşluğu ve ardından içeriği orijinal konumuna geri itmek için aynı miktarda dolgu kullanır. Teknik dikey, yatay ve iki yönlü kaydırma için çalışır.

Demos:

• Dikey
• Yatay
• Her iki yönde

Dikey sürüm için örnek kod:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}

kullanın:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Bu, kaydırma çubuğunu, kaydırma çubukları olmayan çakışan bir div ile bir miktar üst üste bindirmek için bir hiledir:

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

Bu yalnızca WebKit tarayıcıları içindir ... Veya tarayıcıya özgü CSS içeriği kullanabilirsiniz (gelecekte varsa). Her tarayıcının ilgili çubukları için farklı ve belirli bir özelliği olabilir.

Microsoft Kenar kullanım için: -ms-overflow-style: -ms-autohiding-scrollbar;ya -ms-overflow-style: none;kadar MSDN başına .

Firefox için eşdeğeri yoktur. Bunu başarmak için bir jQuery eklentisi olmasına rağmen, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Bu cevap kodu içermediğinden, sayfadaki çözüm şöyledir :

Sayfaya göre, bu yaklaşımın çalışmak için kaydırma çubuğunun genişliğini önceden bilmesine gerek yoktur ve çözüm tüm tarayıcılar için de çalışır ve burada görülebilir .

İyi olan şey, kaydırma çubuğunu gizlemek için dolgu veya genişlik farklarını kullanmaya zorlanmamanızdır.

Bu aynı zamanda zum için de güvenlidir. Doldurma / genişlik çözümleri, minimuma yakınlaştırıldığında kaydırma çubuğunu gösterir.

Firefox düzeltmesi: http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>

Sadece aşağıdaki üç satırı kullanın ve probleminiz çözülecektir:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Liaddshapes, kaydırmanın geldiği div'ın adıdır.

Bu benim için çapraz tarayıcıda çalışır. Ancak, bu, mobil tarayıcılarda yerel kaydırma çubuklarını gizlemez.

In SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

In CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

Aşağıdakiler benim için belirli bir div öğesi için Microsoft, Chrome ve Mozilla'da çalışıyordu:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

CSS'yi buna göre uygulayın.

Buradan kontrol edin (Internet Explorer ve Firefox'ta test edilmiştir).

11 Aralık 2018'den itibaren (Firefox 64 ve üstü), bu sorunun cevabı gerçekten çok basittir, çünkü Firefox 64+ artık CSS Kaydırma Çubuğu Şekillendirme spesifikasyonunu uygulamaktadır .

Sadece aşağıdaki CSS'yi kullanın:

scrollbar-width: none;

Firefox 64 sürüm not linkine buradan ulaşabilirsiniz .

kullanın:

CSS

#subparent {
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0, 0, 0, 1.00) solid;
}

#parent {
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child {
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

kullanım

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

Kaydırma çubuklarını yüklemek veya boşaltmak veya yeniden yüklemek istediğiniz herhangi bir nokta için bu işlevleri çağırın. Chrome'da test ettiğim için hala Chrome'da kaydırılabilir, ancak diğer tarayıcılardan emin değilim.

Bu benim için çalışıyor:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

Modern tarayıcılarda şunları kullanabilirsiniz wheel event:

// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
    const step = 100; // How many pixels to scroll

    if (e.deltaY > 0) // Scroll down
        content.scrollTop += step;
    else // Scroll up
        content.scrollTop -= step;
});

Benim sorunum: HTML içeriğimde herhangi bir stil istemiyorum. Vücudumun herhangi bir ekran çubuğu için CSS ızgaralarıyla çalışan herhangi bir kaydırma çubuğu olmadan ve yalnızca dikey bir kaydırma olmadan doğrudan kaydırılabilir olmasını istiyorum .

Kutu boyutlandırma değer darbe dolgu veya marj çözümleri, bunlar ile çalışır içerik-box: box-boyutlandırma .

Hala "-moz-scrollbars-none" yönergesine ihtiyacım var ve gdoron ve Mr_Green gibi kaydırma çubuğunu gizlemek zorunda kaldım. Denedim -moz-transformve -moz-padding-startdarbeye karşı sadece Firefox, ama çok fazla çalışma ihtiyacı duyarlı yan etkileri vardı.

Bu çözüm, "display: grid" stiline sahip HTML gövde içeriği için çalışır ve yanıt verir.

/* Hide HTML and body scroll bar in CSS grid context */
html, body {
  position: static; /* Or relative or fixed ... */
  box-sizing: content-box; /* Important for hidding scrollbar */
  display: grid; /* For CSS grid */

  /* Full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}

html {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  background: transparent;
  visibility: hidden;
  width: 0px;
}

/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make HTML with overflow hidden */
  html {
    overflow: hidden;
  }

  /* Make body max height auto */
  /* Set right scroll bar out the screen  */
  body {
    /* Enable scrolling content */
    max-height: auto;

    /* 100vw +15px: trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);

    /* Set back the content inside the screen */
    padding-right: 15px;
  }
}

body {
  /* Allow vertical scroll */
  overflow-y: scroll;
}

divŞu anda kabul edilen cevapta olduğu gibi bir iç kısma dolgu eklemek , herhangi bir nedenden dolayı kullanmak istiyorsanız işe yaramaz box-model: border-box.

Her iki durumda da işe yarayan şey, iç genişliğini div% 100 artı kaydırma çubuğunun genişliğine ( overflow: hiddendış bölmede varsayarak ) arttırmaktır .

Örneğin, CSS'de:

.container2 {
    width: calc(100% + 19px);
}

JavaScript'te çapraz tarayıcı:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

Yatay kaydırma için böyle yapıyorum; sadece CSS ve Bootstrap / col- * gibi çerçevelerle iyi çalışır. Yalnızca iki ekstra divs ve bir widthveya max-widthsetli üst öğeye ihtiyaç duyar :

Metni kaydırmak için seçebilir veya dokunmatik ekranınız varsa parmaklarınızla kaydırabilirsiniz.

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
    overflow-x: hidden;
    margin-bottom: -17px;
    overflow-y: hidden;
    width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 17px;
    white-space: nowrap;
    cursor: pointer
}

/* The following classes are only here to make the example looks nicer */
.row {
    width: 100%
}
.col-xs-4 {
    width: 33%;
    float: left
}
.col-xs-3 {
    width:25%;
    float:left
}
.bg-gray {
    background-color: #DDDDDD
}
.bg-orange {
    background-color:#FF9966
}
.bg-blue {
    background-color: #6699FF
}
.bg-orange-light{
    background-color: #FFAA88
}
.bg-blue-light{
    background-color: #88AAFF
}

<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

Tembel insanlar için kısa versiyon:

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
  overflow-x: hidden;
  margin-bottom: -17px;
  overflow-y: hidden;
  width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 17px;
  white-space: nowrap;
  cursor:pointer
}

/* The following classes are only here to make the example looks nicer */
.parent-style {
    width: 100px;
    background-color: #FF9966
}

<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

Aşağıdaki SASS stili, kaydırma çubuğunuzu çoğu tarayıcıda saydam yapmalıdır (Firefox desteklenmez):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

Projemde yukarıdaki çözümleri deniyorum ve nedense div konumlandırma nedeniyle kaydırma çubuğunu gizleyemedim. Bu nedenle, kaydırma çubuğunu yüzeysel olarak kapsayan bir div ekleyerek gizlemeye karar verdim. Aşağıdaki örnek yatay kaydırma çubuğu içindir:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

Karşılık gelen CSS aşağıdaki gibidir:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

Bu vücutta olacak:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

Ve bu CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}

Bu, yine de tüm tarayıcılar için çalışması gereken bir divit esque çözümüdür.

İşaretleme aşağıdaki gibidir ve göreli konumlandırmaya sahip bir şeyin içinde olması gerekir (ve genişliği örneğin 400 piksel olarak ayarlanmalıdır):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

perfect-scrollbarEklenti gitmek için yol olarak görünüyor, bkz: https://github.com/noraesae/perfect-scrollbar

Kaydırma çubukları sorunu için iyi belgelenmiş ve eksiksiz bir JavaScript tabanlı çözümdür.

Deneme sayfası: http://noraesae.github.io/perfect-scrollbar/

Başka bir tür hacky yaklaşım yapmak overflow-y: hiddenve sonra böyle bir şey ile el ile kaydırma öğesidir:

function detectMouseWheelDirection(e) {
  var delta = null, direction = false;
  if (!e) { // If the event is not provided, we get it from the window object
    e = window.event;
  }
  if (e.wheelDelta) { // Will work in most cases
    delta = e.wheelDelta / 60;
  } else if (e.detail) { // Fallback for Firefox
    delta = -e.detail / 2;
  }
  if (delta !== null) {
    direction = delta > 0 ? -200 : 200;
  }
  return direction;
}

if (element.addEventListener) {
  element.addEventListener('DOMMouseScroll', function(e) {
    element.scrollBy({
      top: detectMouseWheelDirection(e),
      left: 0,
      behavior: 'smooth'
    });
  });
}

Deepmikoto'nun blogunda onmousewheelolayların nasıl tespit edileceği ve bunlarla nasıl başa çıkılacağı hakkında harika bir makale var . Bu sizin için işe yarayabilir, ancak kesinlikle zarif bir çözüm değildir.

Sadece geliştirirken kullandığım kaydırma çubuğunu gizlemek için kombine bir snippet'i paylaşmak istedim. İnternette benim için çalışan birkaç parçacığın bir koleksiyonudur:

.container {
    overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */

    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}


.container::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

Kaydırma çubuğunu gizlemek için aşağıdaki kodu kullanabilirsiniz, ancak yine de kaydırma yapabilirsiniz:

.element::-webkit-scrollbar { 
    width: 0 !important 
}

Taşan içeriğe sahip öğelerin kaydırma çubuklarını gizlemek için kullanın.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

Başka bir basit çalışma keman :

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

Üst kapta taşma ve alt kapta otomatik taşma. Basit.

Bu zor çözüm eski IE web tarayıcısında bile çalışır

Bu [ dikey kaydırma çubuğu ] için bir geçici çözümdür

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

Sadece dene: jsfiddle

overflow-xKaydırma overflow:hiddenyapmak, ebeveyn ve istediğiniz genişlik için çocuğun genişliğinin genişliğini% 100, dolgu değerini 15 piksele ayarlayın .

Internet Explorer 8 ve daha düşük sürümler hariç, Internet Explorer ve Edge dahil tüm büyük tarayıcılarda mükemmel çalışır.