এই নিবন্ধটি অসংখ্য উদাহরণ সহ CSS ওভারফ্লো-y সম্পত্তির ব্যবহার প্রদর্শন করে।
কিভাবে CSS এ Overflow-y প্রপার্টি ব্যবহার করবেন?
সিএসএস ' overflow-y ” সম্পত্তি একটি উপাদানের মধ্যে ক্রস-অক্ষ বরাবর বিষয়বস্তুর উপচে পড়া নিয়ন্ত্রণ করতে ব্যবহার করা হয়। এটি নির্দিষ্ট করে যে বিষয়বস্তুটি ক্লিপ করতে হবে বা কন্টেইনারের উচ্চতা অতিক্রম করলে একটি স্ক্রলবার যোগ করতে হবে। এই সম্পত্তির সম্ভাব্য মান হল ' দৃশ্যমান ', ' গোপন ', ' স্ক্রল ', এবং ' স্বয়ংক্রিয় ”
ওভারফ্লো-ওয়াই সম্পত্তির আরও ভাল প্রদর্শনের জন্য আমাদের নীচের উদাহরণগুলি দেখুন:
উদাহরণ 1: ওভারফ্লো-y সম্পত্তির জন্য একটি মান হিসাবে দৃশ্যমান ব্যবহার করা
দ্য ' দৃশ্যমান ” মান কন্টেইনার থেকে বিষয়বস্তুকে ওভারফ্লো করতে দেয় এবং কোনো ক্লিপিং বা স্ক্রলবার যোগ করে না। নীচের ব্যবহারিক কোড ব্লক দেখুন:
>
>
>
উপরের কোড ব্লকের বর্ণনা:
- প্রথমে, “এর একটি মান নির্ধারণ করুন অভিভাবক 'এর কাছে' ক্লাস ' বৈশিষ্ট্য এবং ব্যবহার করুন ' শৈলী ” বৈশিষ্ট্য।
- উপরন্তু, 'এর মান প্রদান করুন দৃশ্যমান 'সিএসএসে' overflow-y 'সম্পত্তি। এবং এটি 'এর সমান সেট করুন শৈলী ” বৈশিষ্ট্য সিএসএস স্টাইলিং কাজ করতে.
- এর পরে, একটি নেস্টেড তৈরি করুন ' div ' উপাদান এবং এটি একটি ক্লাস বরাদ্দ ' শিশু বিষয়বস্তু ” এছাড়াও, এটিতে ডামি ডেটা সরবরাহ করুন।
এখন, ভিজ্যুয়ালাইজেশন বাড়ানোর জন্য CSS বৈশিষ্ট্যগুলি ব্যবহার করুন যা CSS ওভারফ্লো-y সম্পত্তির আরও ভাল বোঝার জন্য সাহায্য করে:
.পিতামাতা {প্রস্থ : 200px ;
উচ্চতা : 150px ;
সীমান্ত : 1px কঠিন কালো ;
}
শিশু বিষয়বস্তু {
উচ্চতা : 300px ;
পেছনের রং : হালকা নীল ;
}
CSS বৈশিষ্ট্যের বিবরণ নীচে দেওয়া হল:
- প্রথমত, ' অভিভাবক 'শ্রেণী নির্বাচন করা হয়েছে এবং 'এর মান 200px ', ' 150px ', এবং ' 1px কঠিন কালো 'সিএসএসে বরাদ্দ করা হয়' প্রস্থ ', ' উচ্চতা ', এবং ' সীমান্ত ” বৈশিষ্ট্য, যথাক্রমে।
- এরপরে, নির্বাচন করুন ' শিশু বিষয়বস্তু 'শ্রেণী এবং 'এর মান সেট করুন 300px ' এবং ' হালকা নীল 'সিএসএসে' উচ্চতা ' এবং ' পেছনের রং ” বৈশিষ্ট্য, যথাক্রমে। এই ক্লাসটি ' অভিভাবক ' ক্লাস যা CSS দ্বারা নিয়ন্ত্রিত হয় ' উপচে পড়া 'সম্পত্তি।
কোড স্নিপেট সংকলনের পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:
স্ন্যাপশট দেখায় যে ওভারফ্লো বিষয়বস্তু এখন দৃশ্যমান হয়েছে এবং স্ক্রলবার বা ক্লিপিং ডিফল্টরূপে যোগ করা হয় না।
উদাহরণ 2: ওভারফ্লো-ওয়াই সম্পত্তির জন্য একটি মান হিসাবে গোপন ব্যবহার করা
দ্য ' overflow-y 'মূল্য সহ সম্পত্তি' গোপন ” সমস্ত বিষয়বস্তু লুকিয়ে রাখে যা এর মূল কন্টেইনারের বাইরে চলে যায়। এই বৈশিষ্ট্যটি স্ক্রলবার যোগ করে না বরং এটি ওভারফ্লো করা সামগ্রী ক্লিপ করে:
>
>
উপরের কোড স্নিপেটে রয়েছে:
- প্রথমত, ভিতরের ডিভ এলিমেন্টের ভিতরে রাখা ডামি কন্টেন্টের বৃদ্ধির সাথে একই কোড আবার ঢোকানো হয়।
- এর পরে, 'এর মান পরিবর্তন করুন overflow-y 'সম্পত্তি' গোপন 'এর কাছে' ' ট্যাগের একটি ক্লাস আছে ' অভিভাবক ”
ওয়েবপৃষ্ঠাটি পুনরায় রেন্ডার করার পরে এইরকম দেখায়:
স্ন্যাপশট দেখায় যে ওভারফ্লো বিষয়বস্তু ক্লিপ করা হয়েছে।
উদাহরণ 3: ওভারফ্লো-ওয়াই সম্পত্তির জন্য একটি মান হিসাবে স্ক্রোল ব্যবহার করা
এর মান নির্ধারণ করা হচ্ছে “ overflow-y 'সম্পত্তি' স্ক্রল ” শেষ ব্যবহারকারীকে এর মাধ্যমে স্ক্রোল করতে দেয়
এটি উপচে পড়া বিষয়বস্তু। আসুন নীচের কোড ব্লকটি দেখুন:
= 'পিতামাতা' শৈলী = 'ওভারফ্লো-ই: স্ক্রোল;' >
= 'শিশু বিষয়বস্তু' > এই শুধু ডামি বিষয়বস্তু ওভারফ্লো-ওয়াই সম্পত্তির প্রদর্শনের জন্য ব্যবহার করা হয় যখন এটি দৃশ্যমান হিসাবে সেট করা হয়। এই শুধু ডামি বিষয়বস্তু ওভারফ্লো-ওয়াই সম্পত্তির প্রদর্শনের জন্য ব্যবহার করা হয় যখন এটি দৃশ্যমান হিসাবে সেট করা হয়।
>
>উপরের কোড ব্লকে:
- প্রথমত, একই এইচটিএমএল স্ট্রাকচার ঢোকানো হয়েছে “ ট্যাগ
- এর পরে, 'এর মান পরিবর্তন করুন overflow-y 'সম্পত্তি' স্ক্রল ” এটি অনুমতি দেয় ' অভিভাবক ওভারফ্লো হওয়া বিষয়বস্তু নিয়ন্ত্রণ করতে স্ক্রলিং প্রভাব সক্ষম করতে div।
উপরের কোড ব্লকের সংকলনের পরে, ওয়েবপৃষ্ঠাটি এইরকম প্রদর্শিত হবে:
উপরের জিআইডিটি ব্যাখ্যা করে যে ওভারফ্লো হওয়া বিষয়বস্তু নিয়ন্ত্রণের জন্য স্ক্রলিং প্রভাব উপলব্ধ করা হয়েছে।
উদাহরণ 4: ওভারফ্লো-y সম্পত্তির জন্য একটি মান হিসাবে অটো ব্যবহার করা
এই উদাহরণে, ব্যবহারকারীরা শুধুমাত্র একটি স্ক্রলবার যোগ করতে পারেন যদি বিষয়বস্তু কন্টেইনারের মধ্যে ফিট না হয়। এছাড়াও, বিষয়বস্তু ওভারফ্লো না হলে স্ক্রলবার যোগ করা হবে না। এটি 'এর মান প্রদান করে সম্ভব স্বয়ংক্রিয় 'সিএসএসে' overflow-y 'সম্পত্তি:
= 'পিতামাতা' শৈলী = 'ওভারফ্লো-ই: অটো;' >
= 'শিশু বিষয়বস্তু' > এই শুধু ডামি বিষয়বস্তু ওভারফ্লো-ওয়াই সম্পত্তির প্রদর্শনের জন্য ব্যবহার করা হয় যখন এটি দৃশ্যমান হিসাবে সেট করা হয়। এই শুধু ডামি বিষয়বস্তু ওভারফ্লো-ওয়াই সম্পত্তির প্রদর্শনের জন্য ব্যবহার করা হয় যখন এটি দৃশ্যমান হিসাবে সেট করা হয়।
>
>উপরের কোড ব্লকে:
- প্রথমে, 'এর ভিতরে একই HTML ফাইল সন্নিবেশ করান ট্যাগ
- এর পরে, 'এর মান আপডেট করুন overflow-y 'সম্পত্তি' স্বয়ংক্রিয় ” এটি বিষয়বস্তুর উল্লম্ব দৈর্ঘ্যের সাথে সম্পর্কিত স্ক্রোলিং প্রভাব সক্ষম করে।
সংকলন প্রক্রিয়া শেষ হওয়ার পরে, ওয়েবপৃষ্ঠাটি এইভাবে কাজ করে:
উপরের জিআইএফ ওভারফ্লো প্রপার্টি প্রদর্শন করে যা বিষয়বস্তুর দৈর্ঘ্য অনুযায়ী স্ক্রলবারকে সক্রিয় করেছে।
উপসংহার
সিএসএস ' overflow-y একটি উপাদানের মধ্যে ক্রস-অক্ষ বরাবর ওভারফ্লো হওয়া বিষয়বস্তু নিয়ন্ত্রণ করতে সম্পত্তি ব্যবহার করা হয়। ওভারফ্লো-ওয়াই বৈশিষ্ট্য ওভারফ্লো-ওয়াই বৈশিষ্ট্যগুলিতে প্রদত্ত নির্দিষ্ট মান অনুসারে বিষয়বস্তু নিয়ন্ত্রণ করে। দ্য ' চাক্ষুষ 'মান উপচে পড়া বিষয়বস্তু প্রদর্শন করে, ' গোপন ' মান ওভারফ্লো বিষয়বস্তু লুকিয়ে রাখে এবং ' স্ক্রল ” মান কন্টেন্ট নিয়ন্ত্রণ করতে একটি স্ক্রলবার যোগ করে। এবং যদি মান হয় ' স্বয়ংক্রিয় ” স্ক্রলবার বিষয়বস্তুর দৈর্ঘ্য অনুযায়ী যোগ বা অপসারণ করে।