আমি কীভাবে স্বয়ংক্রিয়ভাবে আমার ডিভিতে একটি উল্লম্ব স্ক্রোলবার যুক্ত করতে পারি?

Question

আমি আমার সাথে একটি উল্লম্ব স্ক্রোলবার যুক্ত করতে চাই <div>। আমি চেষ্টা করেছি overflow: auto, কিন্তু কাজ করছে না। আমি ফায়ারফক্স এবং ক্রোমে আমার কোড পরীক্ষা করেছি।

আমি এখানে ডিভ স্টাইল কোডটি আটকানো করছি:

float: left;
width: 1000px;
overflow: auto;

Comments

আপনার মার্কআপ সহ একটি জেএসফিডাল বা আরও সিএসএস

— গৌতম

এটি চেষ্টা করুন: overflow-y:scrollএবং কিছু উচ্চতা । এই দস্তাবেজগুলির মাধ্যমে যান ।

— মিঃগ্রিন

আপনার উত্তরের জন্য ধন্যবাদ মিঃগ্রিন তবে এই কোডটি আমার পক্ষে কাজ করছে না।

— জয়

স্ক্রোলটিকে কাজ করতে, অভ্যন্তরের সামগ্রীটি উপচে পড়া উচিত ।

— মিস্টার_গ্রীন

আপনার এইচটিএমএল এবং সিএসএস কোড এখানে পোস্ট করুন।

— মিঃগ্রিন

Answer 1

overflow: auto;সম্পত্তিটি কাজ করতে আপনাকে কিছু উচ্চতা নির্ধারণ করতে হবে ।
পরীক্ষার উদ্দেশ্যে, যুক্ত করুন height: 100px;এবং পরীক্ষা করুন।
এবং এটির overflow-y:auto;পরিবর্তে আপনি দিলে এটি আরও ভাল হবে overflow: auto;কারণ এটি উপাদানটিকে কেবল উল্লম্ব নয় তবে অনুভূমিক নয় sc

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

যদি আপনি ধারকটির উচ্চতা জানেন না এবং কন্টেইনারটি একটি নির্দিষ্ট উচ্চতায় পৌঁছায় আপনি উল্লম্ব স্ক্রোলবারটি দেখাতে চান , সম্পত্তিটির পরিবর্তে 100pxব্যবহার max-heightকরুন height।

আরও তথ্যের জন্য, এই এমডিএন নিবন্ধটি পড়ুন ।

Comments

হ্যাঁ আমি আপনার বক্তব্য পেয়েছি এবং পরীক্ষা করেছি, এটি ফায়ারফক্সে নয় তবে ক্রোমে ভাল কাজ করে। আরও একটি বিভ্রান্তিকর বিষয় হ'ল উল্লম্ব স্ক্রোলবারটি এফএফ-তে পৃষ্ঠা লোডের সময় উপস্থিত হয় তবে পৃষ্ঠা লোডিং শেষ হয়ে গেলে অদৃশ্য হয়ে যায়!

— জায়ে

"আপনাকে কিছু উচ্চতা নির্ধারণ করতে হবে" ঠিক আমার সমস্যা, ধন্যবাদ! : পি

— ওয়াগনার দা সিলভা

Answer 2

আপনাকে max-heightসম্পত্তি যুক্ত করতে হবে।

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}

<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>

Answer 3

আপনি সেট করতে পারেন:

overflow-y: scroll;height: XX px

Comments

এটি পূর্ববর্তী উত্তর দ্বারা পরামর্শ দেওয়া হয়েছে।

— উমনিওব

Answer 4

আমি আমার উপর একটি আশ্চর্যজনক স্ক্রোলার পেয়েছি div-popup। প্রয়োগ করতে, এই বিভাগটি আপনার ডিভ উপাদানটিতে যুক্ত করুন:

overflow-y: scroll;
height: XXXpx;

heightআপনার নির্দিষ্ট করা DIV আছে উচ্চতা হতে পারে এবং একবার যদি এই উচ্চতা অতিক্রম বিষয়বস্তু আছে, আপনি এটি স্ক্রল করতে হবে।

ধন্যবাদ.

Answer 5

আপনার ডিভিতে উল্লম্ব স্ক্রোল বারটি দেখানোর জন্য আপনাকে যুক্ত করতে হবে

height: 100px;   
overflow-y : scroll;

অথবা

height: 100px; 
overflow-y : auto;

Answer 6

আপনি কী জন্য ডিভটি ব্যবহার করার চেষ্টা করছেন তা আমি নিশ্চিত নই, তবে এটি কিছু এলোমেলো লেখার উদাহরণ is

মিঃগ্রিন যোগ করার কথা বললে সঠিক নির্দেশনা দিয়েছিলেন overflow-y: auto যা এটি উল্লম্ব স্ক্রোলিংয়ের মধ্যে সীমাবদ্ধ করে। এটি একটি জেএসফিডাল উদাহরণ:

JSFiddle

Comments

সবার আগে @ মিঃগ্রিন আপনার পরামর্শটি Chrome এ ঠিকঠাক কাজ করছে তবে এফএফ-তে নয়। এবং উচ্চতা যুক্ত করার কোনও বিকল্প আছে, কারণ আমি আমার ডিজাইনের কাঠামোর জন্য উচ্চতায় আমার ডিভের সাথে যুক্ত করতে পারি না।

— জায়ে

Answer 7

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Comments

দয়া করে আপনার উত্তরে ব্যাখ্যা যুক্ত করুন

— মাস্তিসা

উত্সটি (এবং ব্যাখ্যা) বলে মনে হচ্ছে: simurai.com/blog/2011/07/26/webkit-scrolbar ।

— কোবারবয়