কিভাবে উপচে পড়া থেকে বিষয়বস্তু বন্ধ করবেন এবং CSS ব্যবহার করে স্ক্রলিং সক্ষম করবেন?

' ট্যাগ করুন এবং এটিকে ' এর একটি ক্লাস বরাদ্দ করুন উপচে পড়া ” তারপরে, সেই div উপাদানটিতে নিম্নলিখিত CSS বৈশিষ্ট্যগুলি বরাদ্দ করুন:

ওভারফ্লো {
প্রস্থ : 200px ;
উচ্চতা : 200px ;
overflow-x : স্বয়ংক্রিয় ;
overflow-y : স্বয়ংক্রিয় ;
স্ক্রল-আচরণ : মসৃণ ;
}

উপরের কোড স্নিপেটে:

• প্রথমত, উভয় CSS এর জন্য “200px” এর মান প্রদান করা হয়। প্রস্থ ' এবং ' উচ্চতা ' বৈশিষ্ট্য। এটি ওয়েবপেজে প্রদর্শিত টেবিলের আকার নির্ধারণ করে।
• পরবর্তী, ব্যবহার করুন ' overflow-x ' এবং ' overflow-y ' বৈশিষ্ট্যগুলি স্ক্রলিং সক্ষম করতে এবং সেট করতে ' স্বয়ংক্রিয় ” মান X এবং Y-অক্ষে।
• শেষ পর্যন্ত, 'এর মান সেট করুন মসৃণ ' প্রতি ' স্ক্রল-আচরণ একটি বিরামহীন ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে।

উপরের কোড স্নিপেটটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:

ওয়েবপৃষ্ঠাটি দেখায় যে টেবিলটি এখন কম জায়গা খাচ্ছে এবং সামগ্রীকে উপচে পড়া বন্ধ করছে। উপরন্তু, স্ক্রলিং প্রভাব সক্রিয় করা হয়েছে.

বিঃদ্রঃ : সেট করে ' overflow: স্বয়ংক্রিয় 'বা' overflow: scroll ”, ব্যবহারকারীরা উপচে পড়া বিষয়বস্তুর জন্য স্ক্রলিং সক্ষম করতে পারেন। উপরন্তু, ' ওভারফ্লো গোপন ” সম্পূর্ণভাবে ওভারফ্লো প্রতিরোধ করতে ব্যবহার করা যেতে পারে।

উপসংহার

'ওভারফ্লো-এক্স' এবং 'ওভারফ্লো-ওয়াই' বৈশিষ্ট্যগুলি ওভারফ্লো নিয়ন্ত্রণ করতে এবং অনুভূমিক এবং উল্লম্ব অক্ষে স্ক্রলিং সক্ষম করতে ব্যবহার করা হয়। এটি সামগ্রীকে উপচে পড়া থেকে বাধা দেয় এবং সমস্ত ডিভাইসের জন্য একটি ইন্টারেক্টিভ প্রতিক্রিয়াশীল নকশা তৈরি করতে স্ক্রলিং সক্ষম করে। এই নিবন্ধটি প্রদর্শন করেছে কিভাবে কন্টেন্টকে উপচে পড়া থেকে আটকাতে হয় এবং CSS ব্যবহার করে স্ক্রলিং সক্ষম করতে হয়।