সিএসএস দিয়ে স্ক্রোল বারের অবস্থান কীভাবে পরিবর্তন করবেন?

Question

সিএসএসের সাহায্যে বাম থেকে ডানে বা নীচে থেকে উপরে উপরে স্ক্রোল বারের অবস্থান পরিবর্তন করার কোনও উপায় আছে কি?

Comments

আপনার ব্রাউজারের স্ক্রোল বার?

— আওইস উমর

jscrollpane.kelvinluck.com এই প্লাগইনটি ব্যবহার করে দেখুন এই jquery প্লাগইন আপনাকে স্ক্রোল বারে কাস্টম সিএসএস করার অনুমতি দেবে।

— আওইস উমর

কেবলমাত্র আমি ভাবতে পারি একটি কাস্টম স্ক্রোলবার এবং শৈলী থাকা আপনার পছন্দ মতো এটি স্থাপন করতে to @ আওসুমার প্রস্তাবিত jscrollpane প্লাগইন এমনটি যা আমি অতীতে ব্যবহার করেছি এবং এটি একটি দুর্দান্ত শুরু।

— Zhihao

বরং সমস্ত ব্রাউজার, তবে আপনি যদি নির্দিষ্ট ব্রাউজার সম্পর্কে জানেন তবে আমাদের বলুন

— মহসেন সাফারি

খাঁটি সিএসএস দিয়ে এটি করার কোনও উপায় নেই।

— Itay

Answer 1

কেবল সিএসএস ব্যবহার:

ডান / বাম ফ্লিপ্পিং: ওয়ার্কিং ফিডল

.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

আমি উপরে divক্রোম 29-তে উল্টানো উপরে / নীচের অংশে উল্টানো ঝাঁকুনিতে শীর্ষস্থানীয় স্ক্রোলবার দেখতে পাচ্ছি না ।

— ম্যাথিজস ফ্লাইটসট্রা

স্পষ্টতই, এটি একটি ব্রাউজার বাগ । আমি উত্তরে আমার ফিডল আপডেট করেছি। এখন দেখ.

— অভ্রহামকুল

গুগল ক্রোমে 35.0.1916.153 এ যখন আমি দ্বিগুণ ঘোরান তখন ইনপুট / নির্বাচন নিয়ে কিছু সমস্যা আছে। এফএফ-তে সবকিছু ঠিকঠাক কাজ করে।

— লেচআপ

@ লেচআপ আপনি কি কোনও ফিডাল পোস্ট করতে পারেন? আমরা সাহায্য করার চেষ্টা করব

— অভ্রহামকুল

আমি সবেমাত্র একটি ত্রুটি আবিষ্কার করেছি (প্রান্তে)। যদি উল্টানো সামগ্রীটিতে এর প্রতিটি সারিতে চেকবক্সগুলি সহ একটি টেবিল থাকে, তবে পয়েন্টার-ইভেন্টগুলি গোলযোগ পেতে চলেছে। আপনি যদি সর্বশেষ চেকবক্সটি নির্বাচন করেন তবে এটি প্রথম এবং বিপরীতটি নির্বাচন করবে select বেহালার দেখুন 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

চালাক, তবে কমপক্ষে আমার লিনাক্স ফায়ারফক্সে হ্যান্ডলার এবং স্ক্রোলবারের ইনসেট / আউটসেট প্রভাবগুলিকে অদলবদল করার পার্শ্ব-প্রতিক্রিয়া রয়েছে; যা অতি বিভ্রান্তিকর।

— মার্টিন টর্নোইজ

এই ansower এ বর্ণন stackoverflow.com/questions/7889449/...

— শাদ্দাদ

@ কার্পেটসমোকার হ্যাঁ, নির্দেশ rtlও ltrদিকটি স্থির করুন । সুতরাং এটিতে নেটিভ স্ক্রোলটি ইফেক্ট থাকবে scroll-down নীচে এবং scroll-upশীর্ষে

— প্রক্রিয়া

হ্যাঁ, এটি উল্লম্ব জন্য স্থির, তবে অনুভূমিক নয়।

— মার্টিন টর্নোইজ 4'16

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নতুন কিছু শিখেছে, তবে আমার উপরে এবং নীচেও দরকার ছিল

— এন্ডলেস