it-swarm.asia

إخفاء شريط التمرير ، ولكن لا يزال بإمكانك التمرير

أريد أن أكون قادرًا على التمرير خلال الصفحة بأكملها ، لكن بدون عرض شريط التمرير.

في Google Chrome:

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

لكن يبدو أن Mozilla Firefox و Internet Explorer لا يعملان بهذا الشكل.

لقد جربت هذا أيضًا في CSS:

overflow: hidden;

هذا يخفي شريط التمرير ، لكن لا يمكنني التمرير بعد الآن.

هل هناك أي طريقة يمكنني إزالة شريط التمرير بينما لا يزال بإمكاني التمرير في الصفحة بأكملها؟ مع فقط CSS أو HTML ، من فضلك.

868
Oussama Dooby

من السهل في WebKit ، مع تصميم اختياري:

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;
}
284
Anirban Bhui

هذا يعمل لي مع خصائص CSS بسيطة:

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

محدث: أضاف خاصية scrollbar-width الجديدة لفايرفوكس.

بالنسبة للإصدارات الأقدم من Firefox ، استخدم: overflow: -moz-scrollbars-none;

151
Hristo Eftimov

UPDATE: يدعم Firefox الآن إخفاء أشرطة التمرير باستخدام CSS ، بحيث يتم الآن تغطية جميع المتصفحات الرئيسية (Chrome و Firefox و IE و Safari وغيرها).

ما عليك سوى تطبيق CSS التالي على العنصر الذي تريد إزالة أشرطة التمرير منه:

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

هذا هو الحل الأقل تقاطعًا للمتصفح المتداخل الذي أعرفه حاليًا. تحقق من التجريبي.


الإجابة الأصلية:

إليك طريقة أخرى لم يتم ذكرها بعد. إنه أمر بسيط حقًا ويتضمن فقط divs و CSS. ليست هناك حاجة إلى JavaScript أو CSS مملوكة وتعمل في جميع المتصفحات. لا يتطلب تحديد عرض الحاوية بشكل صريح إما مما يجعلها سائلة.

تستخدم هذه الطريقة هامشًا سلبيًا لتحريك شريط التمرير إلى خارج الأصل وبعد ذلك بنفس مقدار الحشو لدفع المحتوى إلى موضعه الأصلي. تعمل تقنية التمرير العمودي والأفقي والاتجاهين.

العروض:

رمز المثال للإصدار العمودي:

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;
}
124
Richrd

استعمال:

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

هذه خدعة لتداخل شريط التمرير نوعًا ما مع div متداخل لا يحتوي على أي أشرطة تمرير:

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

هذا فقط من أجل WebKit المتصفحات ... أو يمكنك استخدام محتوى CSS خاص بالمتصفح (إذا كان هناك أي مستقبلاً). يمكن أن يكون لكل متصفح خاصية مختلفة ومحددة لشريطه الخاص.

لاستخدام Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar; أو -ms-overflow-style: none; كـ لكل MSDN .

لا يوجد ما يعادل Firefox. على الرغم من وجود مكون إضافي مسج لتحقيق ذلك ، http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

70
Arpit Singh

هذه الإجابة لا تتضمن الكود ، لذلك هنا الحل من الصفحة :

وفقًا للصفحة ، لا يحتاج هذا النهج إلى معرفة عرض شريط التمرير في وقت مبكر حتى يعمل ويعمل الحل لجميع المتصفحات أيضًا ، ويمكن رؤيته هنا .

الشيء الجيد هو أنك لست مضطرًا لاستخدام اختلافات الحشو أو العرض لإخفاء شريط التمرير.

هذا هو أيضا التكبير آمنة. تُظهر حلول الحشو/العرض شريط التمرير عند التكبير إلى الحد الأدنى.

إصلاح فايرفوكس: 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>
33
Timo Kähkönen

ما عليك سوى استخدام الأسطر الثلاثة التالية وسيتم حل مشكلتك:

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

حيث liaddshapes هو اسم div حيث التمرير قادم.

17
Innodel

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;
}

تطبيق المغلق وفقا لذلك.

التحقق من ذلك هنا (تم اختباره في Internet Explorer و Firefox).

9
Mischa

اعتبارًا من 11 كانون الأول (ديسمبر) 2018 (Firefox 64 والإصدارات الأحدث) ، كانت إجابة هذا السؤال بسيطة للغاية حيث أن Firefox 64+ الآن يطبق CSS Scrollbar Styling spec .

فقط استخدم CSS التالي:

scrollbar-width: none;

فايرفوكس 64 الإصدار ملاحظة الرابط هنا .

7
Chris

استعمال:

#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);
}

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

استعمال

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
}

استدعاء هذه الوظائف لأي نقطة تريد تحميل أو إلغاء تحميل أو إعادة تحميل أشرطة التمرير. لا يزال قابلاً للتمرير في Chrome أثناء اختباره في Chrome ، لكنني لست متأكدًا من المتصفحات الأخرى.

6
user43353

مشكلتي: لا أريد أي نمط في html الخاص بي ، أريد مباشرة التمرير على جسدي بدون أي شريط تمرير ، وفقط التمرير العمودي ، مع شبكات css لأي حجم شاشة.

تحجيم المربع قيمة حلول الحشو أو الهامش ، تعمل مع تحجيم الصندوق: - box-box .

ما زلت بحاجة إلى التوجيه "-moz-scrollbars-none" ، ومثل gdoron و Mr_Green ، كان علي إخفاء شريط التمرير. لقد حاولت -moz-convert و -moz-padding-start ، أن تؤثر فقط على فايرفوكس ، ولكن كان هناك آثار جانبية استجابة التي تحتاج إلى الكثير من العمل.

يعمل هذا الحل مع محتوى نص html بنمط "عرض: شبكة" وهو سريع الاستجابة.

/* 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;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  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;
}
5
Lucile Fievet

على المتصفحات الحديثة ، يمكنك استخدام wheel eventhttps://developer.mozilla.org/en-US/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
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;
});
5
Doua Beri

إضافة الحشوة إلى div داخلي ، كما هو الحال في الإجابة المقبولة حاليًا ، لن تعمل إذا كنت ترغب في استخدام box-model: border-box لسبب ما.

ما ينجح في كلتا الحالتين هو زيادة عرض div الداخلي إلى 100٪ بالإضافة إلى عرض شريط التمرير (على افتراض overflow: hidden على div الخارجي).

على سبيل المثال ، في CSS:

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

في Javascript ، متصفح مشترك:

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

هذه هي الطريقة التي أقوم بها من أجل التمرير الأفقي ، فقط CSS ويعمل بشكل جيد مع إطارات مثل bootstrap/col- *. يحتاج فقط إلى 2 div إضافية ويكون الأصل مع مجموعة عرض أو عرض أقصى:

يمكنك تحديد النص لجعله يتم تمريره أو التمرير بأصابعك إذا كان لديك شاشة لمس.

.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>

نسخة قصيرة للأشخاص كسول:

.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>
4
Jean

هذا يعمل لي:

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

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

يبدو أن المكون الإضافي perfect-scrollbar هو الطريقة التي يجب اتباعها ، راجع: https://github.com/noraesae/perfect-scrollbar

تم توثيقه بشكل جيد وكامل المستندة إلى JS الحل لمشكلة أشرطة التمرير.

صفحة العرض التجريبي: http://noraesae.github.io/perfect-scrollbar/

3
jmarceli

هذا هو حل divitis-esque الذي يجب أن يعمل بلا حدود لجميع المتصفحات ...

الترميز كالتالي ، ويجب أن يكون بداخل شيء ذي موضع نسبي (ويجب ضبط عرضه ، على سبيل المثال ، 400 بكسل):

<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;
}
3
user3638471

سيكون هذا في الجسم:

<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>

وهذا هو CSS:

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

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

لقد جربت الحلول المذكورة أعلاه في مشروعي ولسبب ما لم أتمكن من إخفاء شريط التمرير بسبب تحديد موقع div. لذلك ، قررت إخفاء شريط التمرير عن طريق إدخال div التي تغطيها بشكل سطحي. مثال أدناه هو لشريط التمرير الأفقي:

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

المقابلة CSS هي كما يلي:

#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*/
}
3
Sriram Ranganathan

كان التالي يعمل بالنسبة لي على Microsoft و Chrome و Mozilla لعنصر div محدد:

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

هناك نوع آخر من الأساليب المتسللة وهو القيام بـ overflow-y: hidden ، ثم قم بالتمرير يدويًا للعنصر باستخدام شيء مثل هذا:

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' 
  });
 });
}

هناك مقالة رائعة حول كيفية اكتشاف أحداث onmousewheel والتعامل معها في deepmikoto's blog. قد يعمل هذا من أجلك ، لكنه بالتأكيد ليس حلاً أنيقًا.

2
Gark Garcia

أردت فقط مشاركة مقتطف مدمج لإخفاء شريط التمرير الذي أستخدمه عند التطوير. إنها مجموعة من المقتطفات المتعددة الموجودة على الإنترنت والتي تناسبني:

    .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 */
    }

آمل أن تجد هذه مفيدة :*

1
stamat

آخر كمان العمل بسيط :

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

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

تجاوز سعة مخفية على الحاوية الأصل ، وتجاوز تلقائي على الحاوية التابعة بسيط.

1
geoyws

فقط قم بتعيين عرض عرض الطفل على 100٪ ، الحشو إلى 15px ، overflow-x للتمرير والفيضان: مخفيًا للوالد وأي عرض تريده ، إنه يعمل تمامًا على جميع المتصفحات الرئيسية بما في ذلك IE Edge باستثناء IE8 وأقل.

0
Sibongiseni Bentley Msomi

2019: الإجابات أعلاه تعمل.

لا تحتاج إلى تعيين الخلفية في معظم الأوقات ولكن هناك خطأ في بعض الأحيان أن ارتفاع شريط التمرير يسيء التصرف. هذا يمكنك إصلاح على النحو المحدد أدناه

height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;  

0
zinoadidi

عانيت من هذه المشكلة ، ومن السهل إصلاحها.

الحصول على حاويتين. سيكون الجزء الداخلي عبارة عن حاوية قابلة للتمرير ، ومن الواضح أن الجزء الخارجي سوف يضم الجزء الداخلي:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

إنه بسيط للغاية ويجب أن يعمل مع أي متصفح.

0
Jordan Michael Rushing