मैं एक div के अंदर स्क्रॉल करने में सक्षम होने की कोशिश कर रहा हूं लेकिन वास्तविक स्क्रॉलबार दिखाए बिना।div scrollbar को छिपाने के लिए jQuery का उपयोग करना, लेकिन स्क्रॉलिंग बनाए रखना?
मैं उपयोगकर्ता की जरूरत है स्क्रॉलव्हील
किसी को भी मैं यह कैसे पूरा कर सकते हैं के रूप में विचारों है का उपयोग कर स्क्रॉल करने के लिए सक्षम होने के लिए?
धन्यवाद!
ठीक है, असली कारण होगा आप क्यों चाहते हैं, लेकिन जब से तुम से कहा कि मैं कोशिश करते हैं और आपकी समस्या का समाधान होगा।
आपको दो divs की आवश्यकता होगी। एक दूसरे के अंदर घोंसला।
<div class="outside">
<div class="inside">
Scrolling Content Goes here.
</div>
</div>
आपको इस स्थिति की सहायता के लिए कुछ सीएसएस की आवश्यकता होगी। अतिप्रवाह: ऊँचाई सीमाओं से पहले एक बार स्क्रॉलिंग आपको ऑटो देगा। उदाहरण के लिए मैंने यादृच्छिक चौड़ाई लगाई। .outer div class से स्क्रॉल बार को धक्का देने के लिए दाईं ओर एक पैडिंग डालें। इस तरह आपको .outer div के अंतर्गत जाने वाली सामग्री के बारे में चिंता करने की आवश्यकता नहीं होगी।
.inside { width: 500px; overflow: auto; height: 300px; padding-right: 20px; }
बाहरी वर्ग के लिए आपको एक ही ऊंचाई, समान चौड़ाई, लेकिन अतिप्रवाह निर्दिष्ट करने की आवश्यकता होगी: छुपाएं।
.outside { width: 500px; height: 300px; overflow: hidden; }
उदाहरण: jsFiddle
यह विभिन्न ज़ूम स्तरों में संगत नहीं है - स्कॉलबार की चौड़ाई आम तौर पर ज़ूम स्तर के साथ बदलती है जिससे स्कॉलबार (वास्तव में अजीब) ब्राउज़र सेटअप के लिए दृश्यमान होता है। इसके अलावा, शायद अधिक अजीब ज़ूम की तुलना में अधिक यथार्थवादी, अलग-अलग ब्राउज़रों में अलग-अलग स्क्रॉलबार होंगे जो इसे सार्वभौमिक बनाते हैं। यह वास्तव में इतना अस्पष्ट है कि किसी को भी इसके बारे में चिंता करने की ज़रूरत नहीं है, लेकिन मैं इसे इंगित करना चाहता था। – lindhe
शायद आप सीएसएस का उपयोग कर सकते हैं और छिपाने या इसके साथ कुछ स्टाइल कर सकते हैं, इसलिए यह छिपा हुआ दिखता है। मुझे मिला कुछ लिंक यहाँ दिए गए हैं।
यह IE और Firefox में परीक्षण किया गया था - दोनों थोड़ा अलग तरह से गद्दी तो मैं सामग्री दृश्यता के लिए खाते की ऊंचाई और चौड़ाई का उपयोग कर रहा संभाल।
यह समझ में आता है कि 2 कंटेनर हैं - एक कंटेनर के लिए और एक सामग्री के लिए, हालांकि ब्राउज़र ब्राउज़र को अलग-अलग पैडिंग संभालते हैं, इसलिए स्क्रॉलबार को छिपे हुए क्षेत्र में धक्का देना बहुत मुश्किल है। यह जहां तीसरे कंटेनर में आता है: स्क्रॉलबार बिना माता पिता के आयामों के लिए
यह स्टाइलशीट चाल के माध्यम से पूरा किया जाता है - स्टाइलशीट पर टिप्पणी की गई है ताकि आप वहां दिए गए निर्देशों/टिप्पणियों का पालन कर सकें।
आशा है कि इससे मदद मिलती है! :)
<html>
<head>
<style type="text/css">
/* Propetary paragraph style */
p {
padding: 0px;
margin: 0px 0px 7px 0px;
}
/* Global notes:
- Since the
/* This is the outer container - set desired height and width here */
.scrollabelDivContainer {
width: 300px;
height: 100px;
padding: 0px;
margin: 0px;
overflow: hidden;
border: 2px dashed #ddd;
}
/* This is the div inside the container - the height should
match the container and width be more (to push the
scrollbar into the hidden content area) */
.scrollableDiv {
width: 400px;
height: 100px;
padding: 0px;
margin: 0px;
overflow-x: hidden;
overflow-y: scroll;
}
/* This houses the content. Set the widget 10px less than the
container width to ensure the content is visible in all browsers */
.scrollableDivContent {
width: 290px;
padding: 0px;
margin: 0px;
overflow: auto;
}
</style>
</head>
<body>
<div class="scrollabelDivContainer">
<div class="scrollableDiv">
<div class="scrollableDivContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt consequat urna ut tincidunt. Vestibulum molestie leo quis dui malesuada vulputate eget tempor purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras nec orci enim, vel tristique lectus. Sed lobortis ultrices enim eu consequat.</p>
<p>Integer magna lectus, iaculis sit amet interdum nec, ullamcorper ut purus. Sed aliquam sollicitudin lacinia. Proin porttitor aliquet lorem, eu dictum lorem suscipit et. Ut vestibulum eros quis turpis auctor id sollicitudin risus faucibus. Quisque volutpat nibh ut sem euismod rutrum. Ut eget orci non quam scelerisque laoreet sit amet a metus. Mauris aliquam facilisis lacinia.<p>
</div>
</div>
</div>
</body>
</html>
स्क्रॉलबार गुम होने पर आप इसे स्क्रॉल करने में सक्षम होना चाहते हैं? मध्य माउस? खींचने पर क्लिक करें? ऊपर या नीचे होवरिंग? –
नाटक! माफ़ कीजिये! आप सही हे! :) स्क्रॉलव्हील/मध्य माउस। (प्रश्न अपडेट कर रहा है) – Eax
आप सीएसएस, हम्म के साथ ऐसा कुछ कर सकते हैं .... http: // jsfiddle।नेट/सी 7 टीआर 8/एकमात्र समस्या यह है कि यह स्पष्ट नहीं है कि जब आप स्क्रॉलबार नहीं देख पा रहे हैं तो div में और अधिक सामग्री है। –