যখন প্রয়োজন হয় তখন আমি কীভাবে একটি ডিভের স্ক্রোলবারকে দৃশ্যমান করব?


151

আমার এই ডিভ আছে:

<div style='overflow:scroll; width:400px;height:400px;'>here is some text</div>

পাঠ্যটি প্রবাহিত না হলেও স্ক্রোলবারগুলি সর্বদা দৃশ্যমান। আমি যখন প্রয়োজন তখন স্ক্রোলবারগুলি কেবল দৃশ্যমান করে তুলতে চাই - এটি কেবলমাত্র তখনই দৃশ্যমান যখন বাক্সে প্রয়োজনীয় পাঠ্য রয়েছে যা তাদের প্রয়োজন। যেমন টেক্সটরিয়া করে। আমি এটা কিভাবে করবো? বা আমার পাঠ্যকে স্টাইল করার একমাত্র বিকল্প তাই এটি একটি ডিভের মতো দেখাচ্ছে?


এই সম্পর্কে কি. উপরে overedোকানো হলে কেবল স্ক্রোলবার দেখায়। এটি আপনার পক্ষে কার্যকর কিনা তা নিশ্চিত নন। stackoverflow.com/questions/7125185/…
রায়ান

codepen.io/anon/pen/QwLeMG আশা করি এটি আপনাকে সহায়তা করতে পারে
বিশালকিন

overflow: auto;অ্যান্ড্রয়েডে :-(
আইয়ুব

উত্তর:


312

ব্যবহার overflow: auto। যখন প্রয়োজন হবে তখনই স্ক্রোলবারগুলি উপস্থিত হবে।

(সিডনোট, আপনি কেবলমাত্র এক্স, বা y স্ক্রোলবার: overflow-x: autoএবং এর জন্যও নির্দিষ্ট করতে পারেন overflow-y: auto)।


5
নোট করুন যে ওভারফ্লো-ওয়াই কেবল যদি নির্দিষ্ট করে তবেই কাজ করেmax-height
কালো

1
ওভারফ্লো-ওয়াইয়ের সর্বোচ্চ-উচ্চতার প্রয়োজন নেই। আমি কখনই ওভারফ্লো-ওয়াইয়ের সাথে সর্বোচ্চ-উচ্চতা ব্যবহার করি নি এবং এটি সর্বদা কাজ করে।
সুমাফু

1
@ সুমাফু আপনার প্রয়োজন হতে পারে মামলার উপর নির্ভর করে যেমন আমি এখনই অভিজ্ঞতা করতে পারি।
ডেভিড

1
আপনার প্রয়োজন heightবা max-heightসেট করা উচিত যদি আপনি ওভারফ্লো উপাদানটিতে ব্যবহার করছেন absoluteবা fixedঅবস্থান করছেন কারণ এগুলি পৃষ্ঠা বা ভিউপোর্ট সীমানার ভিত্তিতে উপাদানটিকে পুনরায় আকার দেওয়া থেকে বিরত করে।
স্কট শোপবাচ

15

এটা চেষ্টা কর:

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

7

চেষ্টা

<div style='overflow:auto; width:400px;height:400px;'>here is some text</div>

6

চেষ্টা

<div id="boxscroll2" style="overflow: auto; position: relative;" tabindex="5001">

0

আমি দেখতে পেলাম যে ডিভের উচ্চতা এখনও দেখাচ্ছে, যখন এটি পাঠ্য আছে বা নেই। সুতরাং আপনি সেরা ফলাফলের জন্য এটি ব্যবহার করতে পারেন।

<div style=" overflow:auto;max-height:300px; max-width:300px;"></div>

0

আপনি নীচে এক দিয়ে চেষ্টা করতে পারেন:

  <div style="width: 100%; height: 100%; overflow-x: visible; overflow-y: scroll;">Text</div>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.