إخفاء شريط التمرير ، ولكن لا يزال بإمكانك التمرير
أريد أن أكون قادرًا على التمرير خلال الصفحة بأكملها ، لكن بدون عرض شريط التمرير.
في Google Chrome:
::-webkit-scrollbar {
display: none;
}
لكن يبدو أن Mozilla Firefox و Internet Explorer لا يعملان بهذا الشكل.
لقد جربت هذا أيضًا في CSS:
overflow: hidden;
هذا يخفي شريط التمرير ، لكن لا يمكنني التمرير بعد الآن.
هل هناك أي طريقة يمكنني إزالة شريط التمرير بينما لا يزال بإمكاني التمرير في الصفحة بأكملها؟ مع فقط CSS أو HTML ، من فضلك.
من السهل في 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;
}
هذا يعمل لي مع خصائص 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;
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;
}
استعمال:
<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
هذه الإجابة لا تتضمن الكود ، لذلك هنا الحل من الصفحة :
وفقًا للصفحة ، لا يحتاج هذا النهج إلى معرفة عرض شريط التمرير في وقت مبكر حتى يعمل ويعمل الحل لجميع المتصفحات أيضًا ، ويمكن رؤيته هنا .
الشيء الجيد هو أنك لست مضطرًا لاستخدام اختلافات الحشو أو العرض لإخفاء شريط التمرير.
هذا هو أيضا التكبير آمنة. تُظهر حلول الحشو/العرض شريط التمرير عند التكبير إلى الحد الأدنى.
إصلاح فايرفوكس: 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>ما عليك سوى استخدام الأسطر الثلاثة التالية وسيتم حل مشكلتك:
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}
حيث liaddshapes هو اسم div حيث التمرير قادم.
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).
اعتبارًا من 11 كانون الأول (ديسمبر) 2018 (Firefox 64 والإصدارات الأحدث) ، كانت إجابة هذا السؤال بسيطة للغاية حيث أن Firefox 64+ الآن يطبق CSS Scrollbar Styling spec .
فقط استخدم CSS التالي:
scrollbar-width: none;
فايرفوكس 64 الإصدار ملاحظة الرابط هنا .
استعمال:
#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>
استعمال
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 ، لكنني لست متأكدًا من المتصفحات الأخرى.
مشكلتي: لا أريد أي نمط في 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;
}
على المتصفحات الحديثة ، يمكنك استخدام 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;
});
إضافة الحشوة إلى 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 + ')';
هذه هي الطريقة التي أقوم بها من أجل التمرير الأفقي ، فقط 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>هذا يعمل لي:
scroll-content {
overflow-x: hidden;
overflow-y: scroll;
}
scroll-content::-webkit-scrollbar{
width: 0;
}
يبدو أن المكون الإضافي perfect-scrollbar هو الطريقة التي يجب اتباعها ، راجع: https://github.com/noraesae/perfect-scrollbar
تم توثيقه بشكل جيد وكامل المستندة إلى JS الحل لمشكلة أشرطة التمرير.
صفحة العرض التجريبي: http://noraesae.github.io/perfect-scrollbar/
هذا هو حل 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;
}
سيكون هذا في الجسم:
<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;
}
لقد جربت الحلول المذكورة أعلاه في مشروعي ولسبب ما لم أتمكن من إخفاء شريط التمرير بسبب تحديد موقع div. لذلك ، قررت إخفاء شريط التمرير عن طريق إدخال div التي تغطيها بشكل سطحي. مثال أدناه هو لشريط التمرير الأفقي:
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</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*/
}
كان التالي يعمل بالنسبة لي على Microsoft و Chrome و Mozilla لعنصر div محدد:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}
هناك نوع آخر من الأساليب المتسللة وهو القيام بـ 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. قد يعمل هذا من أجلك ، لكنه بالتأكيد ليس حلاً أنيقًا.
أردت فقط مشاركة مقتطف مدمج لإخفاء شريط التمرير الذي أستخدمه عند التطوير. إنها مجموعة من المقتطفات المتعددة الموجودة على الإنترنت والتي تناسبني:
.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 */
}
آمل أن تجد هذه مفيدة :*
#maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}
تجاوز سعة مخفية على الحاوية الأصل ، وتجاوز تلقائي على الحاوية التابعة بسيط.
فقط قم بتعيين عرض عرض الطفل على 100٪ ، الحشو إلى 15px ، overflow-x للتمرير والفيضان: مخفيًا للوالد وأي عرض تريده ، إنه يعمل تمامًا على جميع المتصفحات الرئيسية بما في ذلك IE Edge باستثناء IE8 وأقل.
2019: الإجابات أعلاه تعمل.
لا تحتاج إلى تعيين الخلفية في معظم الأوقات ولكن هناك خطأ في بعض الأحيان أن ارتفاع شريط التمرير يسيء التصرف. هذا يمكنك إصلاح على النحو المحدد أدناه
height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;
عانيت من هذه المشكلة ، ومن السهل إصلاحها.
الحصول على حاويتين. سيكون الجزء الداخلي عبارة عن حاوية قابلة للتمرير ، ومن الواضح أن الجزء الخارجي سوف يضم الجزء الداخلي:
#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }
إنه بسيط للغاية ويجب أن يعمل مع أي متصفح.