CSS के साथ स्क्रॉल बार स्थिति कैसे बदलें?

Question

क्या सीएसएस के साथ स्क्रॉल पट्टी की स्थिति को बाएं से दाएं या नीचे से ऊपर तक बदलने का कोई तरीका है?

Comments

अपने ब्राउज़र का स्क्रॉल बार?

— आवा उमर

इस प्लगइन की कोशिश करो jscrollpane.kelvinluck.com यह jquery प्लगइन आपको स्क्रॉल बार पर कस्टम सीएसएस करने की अनुमति देगा।

— प्रतीक्षारत उमर

केवल एक चीज जिसके बारे में मैं सोच सकता हूं, वह है कि आपके पास यह पसंद करने के लिए एक कस्टम स्क्रॉलबार और शैली है। @AwaisUmar द्वारा सुझाया गया jscrollpane प्लगइन कुछ ऐसा है जिसे मैंने अतीत में इस्तेमाल किया है और यह एक बहुत अच्छी शुरुआत है।

— झिहौ

सभी ब्राउज़र के बजाय, लेकिन यदि आप विशिष्ट ब्राउज़र के बारे में जानते हैं, तो हमें बताएं

— मोहसिन सफारी

शुद्ध सीएसएस के साथ इसे करने का कोई तरीका नहीं है।

— इटाए

Answer 1

केवल CSS का उपयोग करना:

राइट / लेफ्ट फ्लिपिंग: वर्किंग फिडल

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

टॉप / बॉटम फ़्लिपिंग: वर्किंग फ़िडल

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
}

Comments

मुझे शीर्ष div29 / नीचे फ़्लिपिंग फ़िडल पर Chrome 29 में फ़्लिप किए गए शीर्ष स्क्रॉलबार दिखाई नहीं देता है ।

— मैथिज फ्लिस्त्रा सेप

जाहिर है, यह एक ब्राउज़र बग है । मैंने जवाब में अपनी फिडेल अपडेट की है। अब यह जांच करें।

— अवरामहकूल

Google Chrome में 35.0.1916.153 जब मैं दोहराता हूं तो इनपुट / चयन में कुछ समस्याएं होती हैं। एफएफ में सब कुछ ठीक काम करता है।

— शाम

@lechup आप एक बेला पोस्ट कर सकते हैं? हम मदद करने की कोशिश करेंगे।

— अवरामहूल

मैंने सिर्फ एक बग (एज पर) की खोज की। यदि फ़्लिप की गई सामग्री में प्रत्येक पंक्ति पर चेकबॉक्स के साथ एक तालिका है, तो पॉइंटर-ईवेंट गड़बड़ होने वाले हैं। यदि आप अंतिम चेकबॉक्स का चयन करते हैं, तो यह पहले और इसके विपरीत का चयन करेगा। बेला देखें jsfiddle.net/uPwfn/646

— जेम्स Cazzetta

Answer 2

यहाँ एक और तरीका कर रहा है, rotating elementके साथ scrollbarके लिए 180deg,रैपिंग यह है contentएक और तत्व में है, और rotatingहै कि wrapperके लिए -180deg। नीचे दिए गए स्निपेट की जांच करें

div {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 15px;
}
#vertical {
  direction: rtl;
  overflow-y: scroll;
  overflow-x: hidden;
  background: gold;
}
#vertical p {
  direction: ltr;
  margin-bottom: 0;
}
#horizontal {
  direction: rtl;
  transform: rotate(180deg);
  overflow-y: hidden;
  overflow-x: scroll;
  background: tomato;
  padding-top: 30px;
}
#horizontal span {
  direction: ltr;
  display: inline-block;
  transform: rotate(-180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=vertical>
  <p>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content
    <br>content</p>
</div>
<div id=horizontal><span> content_content_content_content_content_content_content_content_content_content_content_content_content_content</span>
</div>

Comments

चतुर, लेकिन कम से कम मेरे लिनक्स फ़ायरफ़ॉक्स पर यह हैंडलर और स्क्रॉलबार के इनसेट / आउटसेट प्रभाव को स्वैप करने का दुष्प्रभाव है; जो अति-भ्रमित है।

— मार्टिन Tournoij

इस ansower stackoverflow.com/questions/7889449/… पर देखें

— Shaddad

@Carpetsmoker हाँ, निश्चित बुद्धि rtlऔर ltrदिशा। तो इसमें देशी स्क्रॉल इफेक्ट होगा, scroll-down नीचे से, और scroll-upऊपर

— प्रक्रिया

हाँ, यह ऊर्ध्वाधर के लिए तय किया गया है, लेकिन क्षैतिज नहीं है।

— मार्टिन टूरनोइज

Answer 3

इसे आज़माएं। उम्मीद है की यह मदद करेगा

<div id="single" dir="rtl">
    <div class="common">Single</div>
</div>

<div id="both" dir="ltr">
    <div class="common">Both</div>
</div>



#single, #both{
    width: 100px;
    height: 100px;
    overflow: auto;
    margin: 0 auto;
    border: 1px solid gray;
}


.common{
    height: 150px;
    width: 150px;
}

Comments

चतुर विचार dirने कुछ नया सीखा, लेकिन मुझे ऊपर और नीचे की भी जरूरत थी

— अंतहीन