CSS இல் Overflow-y சொத்தை எவ்வாறு பயன்படுத்துவது?

இந்தக் கட்டுரை CSS ஓவர்ஃப்ளோ-y சொத்தின் பயன்பாட்டை பல எடுத்துக்காட்டுகளுடன் விளக்குகிறது.

CSS இல் Overflow-y சொத்தை எவ்வாறு பயன்படுத்துவது?

CSS” வழிதல்-ஒய் ஒரு உறுப்புக்குள் குறுக்கு அச்சில் உள்ளடக்கம் நிரம்பி வழிவதைக் கட்டுப்படுத்த சொத்து பயன்படுத்தப்படுகிறது. உள்ளடக்கத்தை கிளிப் செய்ய வேண்டுமா அல்லது கன்டெய்னரின் உயரத்தை மீறும் போது உருள்பட்டியைச் சேர்க்க வேண்டுமா என்பதைக் குறிப்பிடுகிறது. இந்த சொத்துக்கான சாத்தியமான மதிப்புகள் ' தெரியும் ”,” மறைக்கப்பட்டுள்ளது ”,” சுருள் ', மற்றும் ' ஆட்டோ ”.

ஓவர்ஃப்ளோ-ஒய் சொத்தின் சிறந்த விளக்கத்திற்கு கீழே உள்ள எடுத்துக்காட்டுகளைப் பார்வையிடுவோம்:

எடுத்துக்காட்டு 1: ஓவர்ஃப்ளோ-ஒய் சொத்துக்கான மதிப்பாக காணக்கூடியதைப் பயன்படுத்துதல்

' தெரியும் ” மதிப்பு உள்ளடக்கத்தை கொள்கலனில் இருந்து நிரம்பி வழிய அனுமதிக்கிறது மற்றும் எந்த கிளிப்பிங் அல்லது ஸ்க்ரோல்பார்களையும் சேர்க்காது. கீழே உள்ள நடைமுறை குறியீடு தொகுதியைப் பார்வையிடவும்:

மேலே உள்ள குறியீடு தொகுதியின் விளக்கம்:

• முதலில், ஒரு மதிப்பை ஒதுக்கவும் பெற்றோர் 'க்கு' வர்க்கம் 'பண்பு மற்றும் பயன்படுத்தவும்' பாணி ” பண்பு.
• கூடுதலாக, 'இன் மதிப்பை வழங்கவும் தெரியும் 'சிஎஸ்எஸ்க்கு' வழிதல்-ஒய் ”சொத்து. மற்றும் அதை சமமாக அமைக்கவும் ' பாணி ” பண்பு CSS ஸ்டைலிங் வேலை செய்ய.
• அடுத்து, ஒரு உள்ளமைவை உருவாக்கவும் ' div 'உறுப்பு மற்றும் அதற்கு ஒரு வகுப்பை ஒதுக்கவும்' குழந்தை உள்ளடக்கம் ”. மேலும், அதற்கு போலித் தரவை வழங்கவும்.

இப்போது, ​​காட்சிப்படுத்தலை மேம்படுத்த CSS பண்புகளைப் பயன்படுத்தவும், இது CSS வழிதல்-y சொத்தை நன்கு புரிந்துகொள்ள உதவுகிறது:

CSS பண்புகளின் விளக்கம் கீழே கொடுக்கப்பட்டுள்ளது:

• முதலில், ' பெற்றோர் 'வகுப்பு தேர்ந்தெடுக்கப்பட்டது மற்றும் மதிப்புகள்' 200px ”,” 150px ', மற்றும் ' 1px திட கருப்பு 'சிஎஸ்எஸ்க்கு ஒதுக்கப்பட்டுள்ளது' அகலம் ”,” உயரம் ', மற்றும் ' எல்லை ” பண்புகள், முறையே.
• அடுத்து, ' குழந்தை உள்ளடக்கம் 'வகுப்பு மற்றும் மதிப்புகளை அமைக்கவும்' 300px 'மற்றும்' வெளிர் நீலம் 'சிஎஸ்எஸ்க்கு' உயரம் 'மற்றும்' பின்னணி நிறம் ” பண்புகள், முறையே. இந்த வகுப்பு ' பெற்றோர் 'CSS ஆல் கட்டுப்படுத்தப்படும் வகுப்பு' நிரம்பி வழிகிறது ”சொத்து.

குறியீடு துணுக்குகளைத் தொகுத்த பிறகு, வலைப்பக்கம் இப்படித் தோன்றும்:

ஸ்னாப்ஷாட், ஓவர்ஃப்ளோ உள்ளடக்கம் இப்போது தெரியும் மற்றும் ஸ்க்ரோல்பார் அல்லது கிளிப்பிங் இயல்பாக சேர்க்கப்படவில்லை என்பதைக் காட்டுகிறது.

எடுத்துக்காட்டு 2: வழிதல்-y சொத்துக்கான மதிப்பாக மறைக்கப்பட்டதைப் பயன்படுத்துதல்

' வழிதல்-ஒய் 'மதிப்பு கொண்ட சொத்து' மறைக்கப்பட்டுள்ளது ” அதன் தாய் கொள்கலனுக்கு வெளியே நகரும் அனைத்து உள்ளடக்கத்தையும் மறைக்கிறது. இந்த சொத்து ஸ்க்ரோல்பார்களைச் சேர்க்காது, அதற்குப் பதிலாக அது நிரம்பி வழியும் உள்ளடக்கத்தை கிளிப் செய்தது:

மேலே உள்ள குறியீடு துணுக்கில் பின்வருவன அடங்கும்:

• முதலாவதாக, அதே குறியீடு உள் உறுப்புக்குள் வைக்கப்பட்ட போலி உள்ளடக்கத்தின் அதிகரிப்புடன் மீண்டும் செருகப்படுகிறது.
• அடுத்து, 'இன் மதிப்பை மாற்றவும் வழிதல்-ஒய் 'சொத்து' மறைக்கப்பட்டுள்ளது 'க்கு'
  'குறிச்சொல்' வகுப்பைக் கொண்டுள்ளது பெற்றோர் ”.

மறு-ரெண்டர் செய்த பிறகு, வலைப்பக்கம் இப்படி இருக்கும்:

ஓவர்ஃப்ளோ உள்ளடக்கம் கிளிப் செய்யப்பட்டிருப்பதை ஸ்னாப்ஷாட் காட்டுகிறது.

எடுத்துக்காட்டு 3: ஓவர்ஃப்ளோ-ஒய் சொத்துக்கான மதிப்பாக ஸ்க்ரோலைப் பயன்படுத்துதல்

மதிப்பை அமைத்தல் ' வழிதல்-ஒய் 'சொத்துக்கு' சுருள் ” இறுதி பயனரை உருட்ட அனுமதிக்கிறது

அதை நிரம்பி வழியும் உள்ளடக்கம். கீழே உள்ள குறியீடு தொகுதியைப் பார்வையிடலாம்:

மேலே உள்ள குறியீடு தொகுதியில்:

• முதலில், அதே HTML அமைப்பு உள்ளே செருகப்பட்டது ' <உடல்> ” குறிச்சொல்.
• அடுத்து, 'இன் மதிப்பை மாற்றவும் வழிதல்-ஒய் 'சொத்துக்கு' சுருள் ”. இது அனுமதிக்கிறது ' பெற்றோர் நிரம்பி வழியும் உள்ளடக்கத்தைக் கட்டுப்படுத்த ஸ்க்ரோலிங் விளைவைச் செயல்படுத்த div.

மேலே உள்ள குறியீடு தொகுதியை தொகுத்த பிறகு, வலைப்பக்கம் இப்படி தோன்றும்:

நிரம்பி வழியும் உள்ளடக்கத்தைக் கட்டுப்படுத்த ஸ்க்ரோலிங் விளைவு உள்ளது என்பதை மேலே உள்ள gid விளக்குகிறது.

எடுத்துக்காட்டு 4: ஓவர்ஃப்ளோ-ஒய் சொத்துக்கான மதிப்பாக ஆட்டோவைப் பயன்படுத்துதல்

இந்த எடுத்துக்காட்டில், உள்ளடக்கம் கொள்கலனுக்குள் பொருந்தவில்லை என்றால் மட்டுமே பயனர்கள் உருள்பட்டியைச் சேர்க்க முடியும். மேலும், உள்ளடக்கம் நிரம்பி வழியவில்லை என்றால் ஸ்க்ரோல்பார் சேர்க்கப்படாது. மதிப்பை வழங்குவதன் மூலம் இது சாத்தியமாகும் ' ஆட்டோ 'சிஎஸ்எஸ்க்கு' வழிதல்-ஒய் 'சொத்து:

மேலே உள்ள குறியீடு தொகுதியில்:

• முதலில், அதே HTML கோப்பை உள்ளே செருகவும் <உடல்> ” குறிச்சொல்.
• அடுத்து, 'இன் மதிப்பைப் புதுப்பிக்கவும் வழிதல்-ஒய் 'சொத்து' ஆட்டோ ”. உள்ளடக்கத்தின் செங்குத்து நீளத்துடன் தொடர்புடைய ஸ்க்ரோலிங் விளைவை இது செயல்படுத்துகிறது.

தொகுத்தல் செயல்முறையின் முடிவில், வலைப்பக்கம் இதுபோல் செயல்படுகிறது:

மேலே உள்ள gif, உள்ளடக்கத்தின் நீளத்திற்கு ஏற்ப சுருள்பட்டியை இயக்கிய ஓவர்ஃப்ளோ பண்பைக் காட்டுகிறது.

முடிவுரை

CSS” வழிதல்-ஒய் ஒரு உறுப்புக்குள் குறுக்கு அச்சில் வழிந்தோடிய உள்ளடக்கத்தைக் கட்டுப்படுத்த சொத்து பயன்படுத்தப்படுகிறது. ஓவர்ஃப்ளோ-ஒய் பண்புகளுக்கு வழங்கப்படும் குறிப்பிட்ட மதிப்பின்படி உள்ளடக்கத்தை கட்டுப்படுத்துகிறது. ' காட்சி 'மதிப்பு நிரம்பிய உள்ளடக்கத்தைக் காட்டுகிறது, ' மறைக்கப்பட்டுள்ளது 'மதிப்பு வழிதல் உள்ளடக்கத்தை மறைக்கிறது, மேலும் ' சுருள் 'மதிப்பு உள்ளடக்கத்தைக் கட்டுப்படுத்த ஒரு சுருள் பட்டியைச் சேர்க்கிறது. மற்றும் மதிப்பு என்றால் ' ஆட்டோ ” உள்ளடக்கத்தின் நீளத்திற்கு ஏற்ப உருள்ப்பட்டி சேர்க்கிறது அல்லது நீக்குகிறது.