কম্পিউটার টিউটোরিয়াল

CSS overflow: scroll


CSS overflow প্রোপার্টির scroll মান দিয়ে ওভারফ্লো ক্লিপ হয় এবং সক্রোলবার যোগ হয়। এটি ইউজারকে পুরো কন্টেন্ট পড়তে দেয়।

উদাহরণ

নিচের কোড রান করে CSS overflow: scroll প্রোপার্টি ইমপ্লিমেন্ট করুন।

<!DOCTYPE html> <html>   <head>     <style>       div {         background-color: orange;         width: 250px;         height: 45px;         border: 2px solid blue;         overflow: scroll;       }     </style>   </head>   <body>     <h1>Heading</h1>     <div>Overflow property used here. This is a demo text to show the working of CSS overflow: scroll. This won't hide the content. Now a scrollbar will be visible.</div>   </body> </html>

আউটপুট

CSS overflow: scroll


  1. CSS দিয়ে স্ক্রলে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড কালার পরিবর্তন

  2. CSS এবং জাভাস্ক্রিপ্ট দিয়ে স্ক্রলে হেডার ছোট করা (Shrink Header)

  3. CSS overflow-anchor প্রোপার্টি ব্যবহার করে স্ক্রোল অ্যাঙ্করিং নিষ্ক্রিয় করা

  4. CSS position প্রোপার্টি ব্যবহার করে অন-স্ক্রোল ফিক্সড নেভিগেশন বার তৈরি করা