मैं पूरे पृष्ठ को स्क्रॉल करने में सक्षम होना चाहता हूं, लेकिन स्क्रॉलबार को दिखाए बिना।
Google Chrome में यह है:
::-webkit-scrollbar {
display: none;
}
लेकिन मोज़िला फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर इस तरह काम नहीं करते हैं।
मैंने यह CSS में भी आजमाया:
overflow: hidden;यह स्क्रॉलबार को छिपाता है, लेकिन मैं इसे और स्क्रॉल नहीं कर सकता।
क्या ऐसा कोई तरीका है जो मैं अभी भी स्क्रॉलबार को हटा सकता हूं जबकि अभी भी पूरे पृष्ठ को स्क्रॉल करने में सक्षम है?
बस CSS या HTML के साथ, कृपया।
जवाबों:
बस एक परीक्षण जो ठीक काम कर रहा है।
#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 */
}
चूंकि स्क्रॉलबार की चौड़ाई अलग-अलग ब्राउज़रों में भिन्न होती है, इसलिए इसे जावास्क्रिप्ट के साथ संभालना बेहतर होता है। यदि आप करते हैं Element.offsetWidth - Element.clientWidth, तो सटीक स्क्रॉलबार चौड़ाई दिखाई देगी।
का उपयोग कर 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;
}
इस उत्तर के आधार पर, मैंने एक साधारण स्क्रॉल प्लगइन बनाया ।
box-sizing: border-box; width: calc(100% + 50px);और पैडिंग के लिए समान मूल्य। किसी भी ब्राउज़र में 50px स्क्रॉलबार चौड़ाई / ऊँचाई नहीं है, इसलिए इसे बस उन सभी को कवर करना चाहिए ...
यह वैकल्पिक स्टाइल के साथ 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;
}
cordovaअनुप्रयोग में यह कोशिश की , ठीक काम किया। overflow:scrollतत्व पर लागू होना था ।
-webkit-overflow-scrolling: touch
यह मेरे लिए सरल सीएसएस गुणों के साथ काम करता है:
.container {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.container::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
फ़ायरफ़ॉक्स के पुराने संस्करणों के लिए, उपयोग करें: overflow: -moz-scrollbars-none;
overflow: -moz-scrollbars-noneFirebox में स्क्रॉलबार छिपाता है , लेकिन स्क्रॉल करना भी अक्षम करता है। क्या आप एक डेमो प्रदान कर सकते हैं जहां यह आपके लिए काम कर रहा है?
-moz-scrollbars-noneसंपत्ति को नवीनतम फ़ायरफ़ॉक्स संस्करणों के लिए हटा दिया गया है: developer.mozilla.org/en-US/docs/Web/CSS/overflow
-webkit-overflow-scrolling: touch
-moz-scrollbars-noneआप उपयोग कर सकते हैं @-moz-document url-prefix() { .container { overflow: hidden; } }। देखें stackoverflow.com/questions/952861/… ।
अपडेट करें:
फ़ायरफ़ॉक्स अब CSS के साथ स्क्रॉलबार छुपाने का समर्थन करता है, इसलिए सभी प्रमुख ब्राउज़र अब कवर किए गए हैं (क्रोम, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर, सफारी, आदि)।
सीधे उस सीएसएस को उस तत्व पर लागू करें जिसे आप स्क्रॉलबार से हटाना चाहते हैं:
.container {
overflow-y: scroll;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
यह कम से कम हैक करने वाला क्रॉस ब्राउज़र समाधान है जिसके बारे में मुझे वर्तमान में जानकारी है। डेमो देखें।
मूल ANSWER:
यहाँ एक और तरीका है जिसका अभी तक उल्लेख नहीं किया गया है। यह वास्तव में सरल है और इसमें केवल दो div और CSS शामिल हैं। कोई जावास्क्रिप्ट या मालिकाना सीएसएस की जरूरत नहीं है, और यह सभी ब्राउज़रों में काम करता है। इसे कंटेनर की चौड़ाई को स्पष्ट रूप से सेट करने की आवश्यकता नहीं है, इस प्रकार यह द्रव बना देता है।
यह विधि स्क्रॉलबार को माता-पिता से बाहर ले जाने के लिए एक नकारात्मक मार्जिन का उपयोग करती है और फिर सामग्री को अपनी मूल स्थिति पर वापस लाने के लिए पैडिंग की समान मात्रा होती है। तकनीक ऊर्ध्वाधर, क्षैतिज और दो तरह से स्क्रॉल करने के लिए काम करती है।
डेमो:
वर्टिकल वर्जन के लिए उदाहरण कोड:
HTML:
<div class="parent">
<div class="child">
Your content.
</div>
</div>
सीएसएस:
.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>
यह एक ओवरलैपिंग डिव के साथ स्क्रॉलबार को कुछ हद तक ओवरलैप करने की एक चाल है जिसमें कोई स्क्रॉल बार नहीं है:
::-webkit-scrollbar {
display: none;
}
यह केवल WebKit ब्राउज़रों के लिए है ... या आप ब्राउज़र-विशिष्ट CSS सामग्री (यदि भविष्य में कोई है) का उपयोग कर सकते हैं। प्रत्येक ब्राउज़र में अपने संबंधित बार के लिए एक अलग और विशिष्ट संपत्ति हो सकती है।
माइक्रोसॉफ्ट एज उपयोग के लिए: -ms-overflow-style: -ms-autohiding-scrollbar;या -ms-overflow-style: none;के रूप में MSDN प्रति ।
फ़ायरफ़ॉक्स के लिए कोई समकक्ष नहीं है। हालाँकि इसे प्राप्त करने के लिए एक jQuery प्लगइन है, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } $.mobile.touchOverflowEnabled = true;
इस उत्तर में कोड शामिल नहीं है, इसलिए यहां पृष्ठ से समाधान है :
पृष्ठ के अनुसार इस दृष्टिकोण को काम करने के लिए समय से पहले स्क्रॉलबार की चौड़ाई जानने की जरूरत नहीं है और समाधान सभी ब्राउज़रों के लिए भी काम करता है, और यहां देखा जा सकता है ।
अच्छी बात यह है कि स्क्रॉलबार को छिपाने के लिए आपको पैडिंग या चौड़ाई के अंतर का उपयोग करने के लिए मजबूर नहीं किया जाता है।
यह भी जूम सेफ है। पैडिंग / चौड़ाई समाधान स्क्रॉलबार को दिखाते हैं जब न्यूनतम तक ज़ूम किया जाता है।
फ़ायरफ़ॉक्स फिक्स: 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>::-webkit-scrollbar {}
padding-right: 150px;इसे ठीक करता है। एफएफ, क्रोम, सफारी और एज में परीक्षण किया गया। बड़े राइट-पेडिंग के कारण कम ज़ूम स्तरों में भी काम करता है।
html { -ms-overflow-style: none;}। इन ब्राउज़रों में पैडिंग-हैक का उपयोग करने की आवश्यकता नहीं है।
overflow-y: scrollइसे स्क्रॉल 23 पर काम करने के लिए स्क्रॉल व्यवहार (लेकिन क्रोम की तरह) छिपाना था।
बस तीन लाइनों का उपयोग करें और आपकी समस्या हल हो जाएगी:
#liaddshapes::-webkit-scrollbar {
width: 0 !important;
}जहां लैडडशाप्स उस div का नाम है जहां स्क्रॉल आ रहा है।
यह मेरे लिए क्रॉस-ब्राउज़र का काम करता है। हालाँकि, यह मोबाइल ब्राउज़र पर देशी स्क्रॉलबारों को नहीं छिपाता है।
में एससीएसएस
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
&::-webkit-scrollbar { /** WebKit */
display: none;
}
}में सीएसएस
.hide-native-scrollbar {
scrollbar-width: none; /* Firefox 64 */
-ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
display: none;
}{}) का क्या अर्थ है? इसकी व्याख्या कैसे की जाए? और &? शायद आपके जवाब में विस्तृत है?
&::-webkit-scrollbarहो जाती .hide-native-scrollbar::-webkit-scrollbar { }है
{ width: 0; height: 0;}लिए :: - वेबकिट-स्क्रॉलबार के display: noneलिए करें।
निम्नलिखित Microsoft, क्रोम और मोज़िला पर मेरे लिए एक विशिष्ट div तत्व के लिए काम कर रहा था:
div.rightsidebar {
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar {
width: 0 !important;
}scrollbar-width(केवल FF) को "प्रायोगिक" फ़्लैग किया गया है
HTML:
<div class="parent">
<div class="child">
</div>
</div>सीएसएस:
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}
.child {
height: 150px;
width: 318px;
overflow-y: scroll;
}तदनुसार सीएसएस लागू करें।
इसे यहां देखें (इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स में परीक्षण किया गया)।
11 दिसंबर 2018 (फ़ायरफ़ॉक्स 64 और ऊपर) के रूप में, इस सवाल का जवाब फ़ायरफ़ॉक्स 64 के रूप में वास्तव में बहुत सरल है अब सीएसएस स्क्रॉलबार स्टाइलिंग टूल को लागू करता है ।
बस निम्नलिखित सीएसएस का उपयोग करें:
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
}स्क्रॉल करने वाले को लोड या अनलोड या फिर से लोड करने के लिए किसी भी बिंदु के लिए इन कार्यों को कॉल करें। क्रोम में यह अभी भी स्क्रॉल करने योग्य है क्योंकि मैंने इसे क्रोम में परीक्षण किया था, लेकिन मैं अन्य ब्राउज़रों के बारे में सुनिश्चित नहीं हूं।
आधुनिक ब्राउज़रों पर आप उपयोग कर सकते हैं 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;
});overflow: hiddenलिए इस कोड का उपयोग किया और mat-card-contentइनसे मेरी समस्या हल हो गई। नोट: मैंने e.deltaYअपने रूप में इस्तेमाल किया stepऔर यह सामान्य स्क्रॉलिंग की तरह काम करता है, इसलिए मुझे लगता है कि सामान्य रूप से स्क्रॉल करने के लिए लेकिन स्क्रॉलबार के साथ छिपा हुआ, यह सबसे अच्छा मैच है।
मेरी समस्या: मुझे अपने HTML सामग्री में कोई शैली नहीं चाहिए। मैं बिना किसी स्क्रॉलबार के सीधे अपने शरीर को स्क्रॉल करना चाहता हूं, और केवल एक ऊर्ध्वाधर स्क्रॉल, किसी भी स्क्रीन आकार के लिए सीएसएस ग्रिड के साथ काम करना ।
बॉक्स आकार मूल्य प्रभाव गद्दी या मार्जिन समाधान, वे साथ काम करता है सामग्री बॉक्स: बॉक्स आकार ।
मुझे अभी भी "-मोज़-स्क्रोलबार्स-कोई नहीं" निर्देश की आवश्यकता है, और गॉर्डन और मि_ग्रीन की तरह, मुझे स्क्रॉलबार को छिपाना पड़ा। मैंने कोशिश की -moz-transformऔर -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; /* 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वर्तमान में स्वीकृत उत्तर की तरह, एक आंतरिक में पैडिंग जोड़ना , यदि आप उपयोग करना चाहते हैं तो किसी कारण से काम नहीं करेगा box-model: border-box।
दोनों मामलों में क्या काम करता है आंतरिक की चौड़ाई div100% तक बढ़ रही है और स्क्रॉलबार की चौड़ाई ( overflow: hiddenबाहरी div पर निर्भर)।
उदाहरण के लिए, CSS में:
.container2 {
width: calc(100% + 19px);
}जावास्क्रिप्ट में, क्रॉस-ब्राउज़र:
var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';यह है कि मैं इसे क्षैतिज स्क्रॉल के लिए कैसे करता हूं; केवल CSS और बूटस्ट्रैप / col- * जैसे चौखटे के साथ अच्छी तरह से काम करता है। इसे केवल दो अतिरिक्त divs और अभिभावक widthया max-widthसेट की आवश्यकता है:
यदि आप एक टचस्क्रीन है, तो आप इसे स्क्रॉल करने या इसे उंगलियों से स्क्रॉल करने के लिए पाठ का चयन कर सकते हैं।
.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>margin-bottomहै padding-bottomलेकिन उसी मूल्य के साथ। यह नीचे के तत्व के लिए जगह से नीचे नहीं खाएगा। यह ओवरलैपिंग को रोकता है।
margin-bottomनकारात्मक है, मुझे लगता है कि इसे एक में नहीं बदला जा सकता है padding-bottom, जो नकारात्मक मूल्यों को संभाल नहीं सकता है
मैं अपनी परियोजना में उपरोक्त समाधानों की कोशिश करने के लिए होता हूं और किसी कारण से मैं विभाजन की स्थिति के कारण स्क्रॉल बार को छिपाने में सक्षम नहीं था। इसलिए, मैंने एक div पेश करके स्क्रॉल बार को छिपाने का फैसला किया जो इसे सतही रूप से कवर करता है। नीचे एक क्षैतिज स्क्रॉल पट्टी के लिए उदाहरण दिया गया है:
<div id="container">
<div id="content">
My content that could overflow horizontally
</div>
<div id="scroll-cover">
</div>
</div>सीएसएस के अनुरूप इस प्रकार है:
#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*/
}यह शरीर पर होगा:
<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>और यह सीएसएस है:
#maincontainer
{
background: grey;
width: 101%;
height: 101%;
overflow: auto;
position: fixed;
}
#child
{
background: white;
height:500px;
}यह एक दिव्य-एस्क्यू समाधान है जो सभी ब्राउज़रों के लिए काम करना चाहिए ...
मार्कअप निम्नानुसार है और रिश्तेदार स्थिति के साथ कुछ अंदर होना चाहिए (और इसकी चौड़ाई निर्धारित की जानी चाहिए, उदाहरण के लिए 400 पिक्सेल):
<div class="hide-scrollbar">
<div class="scrollbar">
<div class="scrollbar-inner">
</div>
</div>
</div>सीएसएस:
.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-scrollbarप्लगइन जाने का रास्ता हो रहा है, देखें: https://github.com/noraesae/perfect-scrollbar
यह स्क्रॉलबार मुद्दे के लिए एक अच्छी तरह से प्रलेखित और पूरा जावास्क्रिप्ट-आधारित समाधान है।
निम्नलिखित SASS स्टाइलिंग को आपके स्क्रॉलबार को अधिकांश ब्राउज़रों पर पारदर्शी बनाना चाहिए (फ़ायरफ़ॉक्स समर्थित नहीं है):
.hide-scrollbar {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
&::-webkit-scrollbar {
width: 1px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
}हैकी एप्रोच का एक अन्य प्रकार है 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में घटनाओं का पता लगाने और उनसे निपटने के तरीके के बारे में एक शानदार लेख है । यह आपके लिए काम कर सकता है, लेकिन यह निश्चित रूप से एक सुरुचिपूर्ण समाधान नहीं है।
मैं सिर्फ स्क्रॉलबार को छिपाने के लिए एक संयुक्त स्निपेट साझा करना चाहता था जिसे मैं विकसित करते समय उपयोग करता हूं। यह इंटरनेट पर पाए जाने वाले कई स्निपेट्स का एक संग्रह है जो मेरे लिए काम करता है:
.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 */
}सामग्री के उपयोग की अधिकता वाले तत्वों के लिए स्क्रॉल बार छिपाने के लिए।
.div{
scrollbar-width: none; /* The most elegant way for Firefox */
} #maincontainer {
background: orange;
width: 200px;
height: 200px;
overflow: hidden;
}
#childcontainer {
background: yellow;
position: relative;
width: 200px;
height: 200px;
top: 20px;
left: 20px;
overflow: auto;
}ओवरफ्लो माता-पिता कंटेनर पर छिपा हुआ है, और बाल कंटेनर पर ओवरफ्लो ऑटो। सरल।
यह मुश्किल समाधान पुराने IE वेब ब्राउज़र पर भी काम करता है
यह [ ऊर्ध्वाधर स्क्रॉलबार ] के लिए एक समाधान है
<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>बस इसे आज़माएं: jsfiddle
बस बच्चे की चौड़ाई की चौड़ाई को 100%, पैडिंग के लिए 15 पिक्सेल, overflow-xस्क्रॉल करने के overflow:hiddenलिए और माता-पिता और जो भी आप चाहते हैं, उसकी चौड़ाई निर्धारित करें।
यह इंटरनेट एक्सप्लोरर 8 और लोअर के अपवाद के साथ इंटरनेट एक्सप्लोरर और एज सहित सभी प्रमुख ब्राउज़रों पर पूरी तरह से काम करता है।
!importantइसलिए मैंने उन सभी को हटा दिया है: jsfiddle.net/5GCsJ/954