स्क्रॉलिंग क्षमता बनाए रखते हुए स्क्रॉलबार छुपाएं

ओवरफ्लो: हिडन का उपयोग करके स्क्रॉलबार को अक्षम करने के बावजूद, स्क्रॉलिंग कार्यक्षमता खो गई थी। इस समस्या को हल करने के लिए, एक वैकल्पिक समाधान मौजूद है जो सीएसएस रैपर को जावास्क्रिप्ट गणनाओं के साथ जोड़ता है। ]

#रैपर { ओवर फलो हिडेन; }

// स्क्रॉलबार को छोड़कर तत्व की चौड़ाई की गणना करें var elementWidth = document.getElementById("element").scrollWidth; // तत्व की चौड़ाई से मेल खाने के लिए रैपर की चौड़ाई सेट करें document.getElementById("रैपर").style.width = elementWidth "px";

सीएसएस के साथ स्क्रॉलबार को छिपाकर और वास्तविक सामग्री की चौड़ाई से मेल खाने के लिए रैपर की चौड़ाई को समायोजित करके, आप माउस के माध्यम से स्क्रॉलिंग कार्यक्षमता को बनाए रख सकते हैं या कीबोर्ड।

#wrapper {
  overflow: hidden;
}

// Calculate the width of the element excluding the scrollbar
var elementWidth = document.getElementById("element").scrollWidth;

// Set the wrapper width to match the element width
document.getElementById("wrapper").style.width = elementWidth   "px";

दृश्य स्क्रॉलबार के बिना स्क्रॉल करने योग्य डिव बनाने के लिए, उसी सिद्धांत को नियोजित करें। बस ओवरफ्लो-वाई: स्क्रॉल जोड़ें; आंतरिक तत्व की संपत्ति।