জাভাস্ক্রিপ্টে এলিমেন্ট বক্সের বাইরে রেন্ডার হওয়া কন্টেন্ট হ্যান্ডেল করা

যদি কন্টেন্ট এলিমেন্ট বক্সের বাইরে রেন্ডার হয়, তবে overflow প্রপার্টি ব্যবহার করে স্ক্রোল যোগ করুন। এটি দর্শকদের পুরো কন্টেন্ট পড়তে সহজ করে দেবে।

উদাহরণ

জাভাস্ক্রিপ্টে overflow প্রপার্টির ব্যবহার শিখতে নিচের কোডটি চালান:

<!DOCTYPE html> <html>    <head>       <style>          #box {             width: 450px;             height: 150px;             background-color: orange;             border: 3px solid red;             margin-left: 20px;          }       </style>    </head>    <body>       <p>ক্লিক করুন ওভারফ্লো প্রপার্টি ব্যবহার করে স্ক্রোল সেট করতে।</p>       <button type="button" onclick="display()">স্ক্রোল সেট করুন</button>       <div id="box">          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>          <p>এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ। এটি একটি ডিভ।</p>       </div>       <br>       <br>       <script>          function display() {             document.getElementById("box").style.overflow = "scroll";          }       </script>    </body> </html>

ব্যাখ্যা: overflow শর্টহ্যান্ড: overflow-x এবং overflow-y একসাথে। scroll সবসময় স্ক্রোলবার দেখাবে, auto প্রয়োজনে দেখাবে। আধুনিক ব্রাউজারে overlay মানও আছে (স্ক্রোলবার কন্টেন্টের উপরে ওভারলে করে, জায়গা নেয় না)।