बाएं हाथ की तरफ एक स्क्रॉल स्क्रैपर कैसे रखें?

Question

क्या किसी div पर वर्टिकल स्क्रॉलबार लगाने के लिए कोई पोज़िशन (बाएँ या दाएँ हाथ की तरफ) निर्दिष्ट करना संभव है?

उदाहरण के लिए इस पृष्ठ को देखें जो बताता है कि अतिप्रवाह विशेषता का उपयोग कैसे करें। क्या स्क्रॉल करने योग्य क्षेत्र के बाईं ओर उस स्क्रॉलबार को रखने का कोई तरीका है?

Comments

एक नजर इस धागे पर। इस Im डर को कुछ सीमाएँ दिखाता है। stackoverflow.com/questions/5123417/…

— ग्रीम लीफ़ीफील्ड

बाईं ओर HTML तत्व स्क्रॉलबार

— peirix

Answer 1

काम करने का उदाहरण: JSFiddle

या

कट और पेस्ट समाधान जो सभी प्रमुख ब्राउज़रों के लिए काम करता है (यहां तक ​​कि सफारी)

कोई भी ऊंचाई या चौड़ाई काम करेगी

<style>
  .list_container {
    direction: rtl;
    overflow:auto;
    height: 50px;
    width: 50px;
  }

  .item_direction {
    direction:ltr;
  }
</style>
<div class="list_container">
  <div class="item_direction">1</div>
  <div class="item_direction">2</div>
  <div class="item_direction">3</div>
  <div class="item_direction">4</div>
  <div class="item_direction">5</div>
  <div class="item_direction">6</div>
  <div class="item_direction">7</div>
  <div class="item_direction">8</div>
  <div class="item_direction">9</div>
  <div class="item_direction">10</div>
  <div class="item_direction">11</div>
  <div class="item_direction">12</div>
</div>

class="item_directionकंटेनर दिशा को संरक्षित करते हुए, पाठ प्रवाह की दिशा बदलने के लिए वैकल्पिक रूप से प्रत्येक आइटम में जोड़ें ।

Comments

उपकार करने में प्रसन्नता।

— jasonleonhard

एक साइड-नोट के रूप में: यह उत्तर मान्य HTML नहीं है क्योंकि इसमें डुप्लिकेट आईडी हैं। यह होना चाहिए class="item_direction"के बजाय id="item_direction"और .item_direction {के बजाय #item_direction {।

— Movabo

माफी, मैंने जल्दी से जवाब दिया और गलती की, आप सही हैं और मैंने अपना जवाब अपडेट कर दिया है।

— जस्सोनलहार्ड

आप सभी प्रत्यक्ष बच्चों पर दिशा को रीसेट करने के लिए एक और CSS नियम का उपयोग कर सकते हैं:.list_container > * { direction: ltr; }

— Erich Schreiner

Answer 2

आप direction:rtl;अपने सीएसएस में कोशिश कर सकते हैं । फिर आंतरिक में पाठ दिशा रीसेट करेंdiv

#scroll{
    direction:rtl; 
    overflow:auto; 
    height:50px; 
    width:50px;}

#scroll div{
    direction:ltr;
}

Untested।

Comments

मुझे लगता है कि IE और ओपेरा आरटीएल सामग्री के लिए स्क्रॉलबार को बाईं ओर रखने के लिए एकमात्र ब्राउज़र हैं।

— जॉय

@ जुबां के तहत क्रोम भी सच नहीं है

— टॉम

मैं पुष्टि करना चाहता हूं कि Chrome 32 बाईं ओर स्थित है। और इस बिंदु पर यह आश्चर्य की बात नहीं है कि फ़ायरफ़ॉक्स सीएसएस में एक पिछड़ापन है

— जॉर्ज माउर

क्रोम / मैक और फ़ायरफ़ॉक्स / मैक पर काम कर रहा है, लेकिन सफारी / मैक नहीं

— मैक्सिमम शियोनी

@GeorgeMauer मोज़िला ने आरटीएल सामग्री के उद्देश्य से दाईं ओर स्क्रॉल बार छोड़ा। उस समय, हमें विश्वास था कि यह एक प्रयोज्य मुद्दा होगा यदि उपयोगकर्ता को वर्तमान पृष्ठ सामग्री के आधार पर अपनी मांसपेशी-मेमोरी को बदलना होगा। मैं उस चर्चा का हिस्सा ले रहा था, जो मोज़िला के बुगज़िला में पाई जा सकती है।

— त्सही अशेर

Answer 3

मेरी भी यही समस्या है। लेकिन जब मैं direction: rtl;टैब और अकॉर्डियन कॉम्बो में जोड़ता हूं, लेकिन यह मेरी संरचना को क्रैश कर देता है।

इसे करने का तरीका direction: rtl;अभिभावक तत्व के साथ div को जोड़ना है , और बाल div सेट के लिए direction: ltr;।

मैं इस पहले https://api.jquery.com/wrap/ का उपयोग करता हूं

$( ".your selector of child element" ).wrap( "<div class='scroll'></div>" );

तो बस सीएसएस के साथ काम :)

बच्चों में div css में जुड़ता है

 .your_class {
            direction: ltr;    
        }

और माता-पिता को वर्ग के साथ jQuery द्वारा जोड़ा गया है

.scroll {
            unicode-bidi:bidi-override;
            direction: rtl;
            overflow: scroll;
            overflow-x: hidden!important;
        }

मेरे लिए प्रीफेक्ट का काम करता है

http://jsfiddle.net/jw3jsz08/1/

Comments

या आप इस तरह से css कर सकते हैं: .scrollBarOnLeft {यूनिकोड-बीड़ी: बीड़ी-ओवरराइड; दिशा: आरटीएल; अतिप्रवाह: स्क्रॉल; अतिप्रवाह-एक्स: छिपा हुआ महत्वपूर्ण! } .scrollBarOnLeft> div {दिशा: ltr; } .scrollBarOnLeft> div> div {}

— जॉन ktejik

Answer 4

एक पुराने प्रश्न की तरह, लेकिन मुझे लगा कि मुझे एक विधि में फेंक देना चाहिए जो इस प्रश्न के पूछे जाने पर व्यापक रूप से उपलब्ध नहीं था।

आप transform: scaleX(-1)माता-पिता का उपयोग करके आधुनिक ब्राउज़रों में स्क्रॉलबार के किनारे को उल्टा कर सकते हैं <div>, फिर एक बच्चे को "आस्तीन" तत्व को उलटने के लिए एक ही परिवर्तन लागू करें।

एचटीएमएल

<div class="parent">
  <div class="sleeve">
    <!-- content -->
  </div>
</div>

सीएसएस

.parent {
  overflow: auto;
  transform: scaleX(-1); //Reflects the parent horizontally
}

.sleeve {
  transform: scaleX(-1); //Flips the child back to normal
}

नोट: आपको IE के रूप में ब्राउज़र के लिए एक उपसर्ग -ms-transformया -webkit-transformउपसर्ग का उपयोग करने की आवश्यकता हो सकती है। CanIUse की जाँच करें और पुराने ब्राउज़र की आवश्यकताओं को देखने के लिए "सभी दिखाएँ" पर क्लिक करें।

Comments

यह सबसे उत्कृष्ट समाधानों में से एक है।

— मिरॉन

धन्यवाद! मैं जो समझ रहा हूं, उससे पाठ की दिशा बदल रही है। परिवर्तन संपत्ति बस अधिक लगता है ... सुरुचिपूर्ण? कम से कम यह शब्दार्थ अधिक सही है। :)

— डोम रामिरेज़

मुझे लगता है कि आप इस विधि का उपयोग करके कुछ GPU संवर्द्धन से भी लाभान्वित होंगे। मैं स्क्रीन के दाईं ओर से एक मेनू में उड़ रहा हूं और पेज स्क्रॉलबार के बगल में मेनू का स्क्रॉलबार नहीं चाहता ... बहुत भ्रामक। मुझे निर्देशन स्विचिंग की तुलना में इसका उपयोग करते हुए कम एनीमेशन jank मिलता है।

— डेविन स्टाकर

आई लाइक दैट ए लूट .. थैंक्यू मैन

— हैडी शाल्टआउट

इस विधि का उपयोग शीर्ष पर क्षैतिज स्क्रॉलबार लगाने के लिए भी किया जा सकता है:transform: scaleY(-1)

— डैनियल विलियम्स

Answer 5

नहीं, आप बिना किसी अतिरिक्त समस्या के स्क्रॉलबार प्लेसमेंट नहीं बदल सकते।

आप टेक्स्ट-डायरेक्शन को राइट-टू-लेफ्ट (rtl) में बदल सकते हैं, लेकिन यह ब्लॉक के अंदर टेक्स्ट पोजिशन भी बदल सकता है।

यह कोड आपकी मदद कर सकता है, लेकिन मुझे यकीन नहीं है कि यह सभी ब्राउज़रों और ओएस में काम करता है।

<element style="direction: rtl; text-align: left;" />

Comments

मुझे लगता है कि IE और ओपेरा आरटीएल सामग्री के लिए स्क्रॉलबार को बाईं ओर रखने के लिए एकमात्र ब्राउज़र हैं।

— जॉय

Answer 6

यहाँ मैं सही स्क्रॉल बार काम करने के लिए क्या किया है। केवल एक चीज पर विचार करने की आवश्यकता है, जब 'दिशा: आरटीएल' का उपयोग किया जाता है और पूरी तालिका को भी बदलना पड़ता है। उम्मीद है कि यह आपको एक विचार देता है कि यह कैसे करना है।

उदाहरण:

<table dir='rtl'><tr><td>Display Last</td><td>Display Second</td><td>Display First</td></table>

इसे देखें: JSFiddle

Answer 7

npmइसके लिए एक समर्पित पैकेज है। सीएसएस-स्क्रॉलबार साइड