شَرْحُ خَاصِّيَّةِ Overflow فِي CSS مَعَ الأَمْثِلَةِ العَمَلِيَّةِ لِكُلِّ قِيمَةٍ
تُعْتَبَرُ خَاصِّيَّةُ overflow فِي لُغَةِ
CSS الأَدَاةَ الرَّئِيسِيَّةَ المَسْؤُولَةَ عَنْ تَهْيِئَةِ
وَإِدَارَةِ "الفَيْضَانِ المِسَاحِيِّ"، حَيْثُ تَتَحَكَّمُ بِدِقَّةٍ فِي
كَيْفِيَّةِ تَعَامُلِ المُتَصَفِّحِ مَعَ المَحْتَوَى الزَّائِدِ الَّذِي
يَتَجَاوَزُ الأَبْعَادَ الهَنْدَسِيَّةَ الثَّابِتَةَ (العَرْضِ
وَالِارْتِفَاعِ) لِلْعُنْصُرِ الحَاوِي. تُسَاعِدُكَ هَذِهِ الخَاصِّيَّةُ عَلَى
الحِفَاظِ عَلَى تَنَاسُقِ وَأَنَاقَةِ قَالِبِ المَوْقِعِ، وَتَمْنَعُ
النُّصُوصَ أَوْ الصُّوَرَ مِنَ البُرُوزِ العَشْوَائِيِّ الَّذِي قَدْ يُفْسِدُ
وَاجِهَةَ المُسْتَخْدِمِ (UI).
لِمَاذَا نَحْتَاجُ إِلَى خَاصِّيَّةِ Overflow؟
عِنْدَمَا نَقُومُ بِبِنَاءِ صَنَادِيقَ مُحَدَّدَةِ الحَجْمِ مِثْلَ البِطَاقَاتِ (Cards) أَوْ أَقْسَامِ التَّعْلِيقَاتِ، وَيَكُونُ المَحْتَوَى الدَّاخِلِيُّ (النَّصُّ أَوْ الصُّورَةُ) أَكْبَرَ مِنَ الطَّاقَةِ الِاسْتِيعَابِيَّةِ لِلْصُّنْدُوقِ، يَحْدُثُ مَا يُسْمَّى بِـ "تَجَاوُزِ السَّعَةِ". هُنَا يَجِبُ عَلَيْنَا كَمُطَوِّرِينَ أَنْ نُحَدِّدَ سِلُوكَ هَذَا الفَائِضِ بَصَرِيًّا عَبْرَ أَرْبَعِ قِيَمٍ قِيَاسِيَّةٍ.
---1. overflow: visible (الظُّهُورُ الاِفْتِرَاضِيُّ)
هَذِهِ هِيَ القِيمَةُ الاِفْتِرَاضِيَّةُ لِجَمِيعِ العَنَاصِرِ فِي المُتَصَفِّحِ. عِنْدَ تَفْعِيلِهَا، لَا يَقُومُ الصُّنْدُوقُ بِقَصِّ أَوْ حَجْبِ أَيِّ شَيْءٍ؛ بَلْ يَنْسَابُ المَحْتَوَى الزَّائِدُ وَيَخْرُجُ عَنِ الحُدُودِ بَارِزًا فَوْقَ أَوْ تَحْتَ العَنَاصِرِ المُجَاوِرَةِ، مِمَّا قَدْ يَتَسَبَّبُ فِي تَدَاخُلٍ بَصَرِيٍّ غَيْرِ مَرْغُوبٍ فِيهِ.
<!-- بِنْيَةُ الـ HTML -->
<div class="box visible">
هَذَا النَّصُّ طَوِيلٌ جِدًّا وَسَوْفَ يَتَجَاوَزُ الحَجْمَ الهَنْدَسِيَّ المَسْمُوحَ بِهِ لِلْصُّنْدُوقِ لِيَظْهَرَ خَارِجَ الحُدُودِ.
</div>
<!-- التَّنْسِيقُ فِي الـ CSS -->
<style>
.box {
width: 200px;
height: 100px;
border: 2px solid #000000;
margin-bottom: 20px;
}
.visible {
overflow: visible; /* المَحْتَوَى يَفِيضُ خَارِجَ الإِطَارِ */
}
</style>
---
2. overflow: hidden (الإِخْفَاءُ التَّامُّ)
عِنْدَ اسْتِخْدَامِ قِيمَةِ hidden، يَقُومُ المُتَصَفِّحُ
بِتَصَرُّفٍ حَاسِمٍ؛ حَيْثُ يَقْتَصُّ أَيَّ مَحْتَوًى يَخْرُجُ عَنْ عَرْضِ
أَوْ ارْتِفَاعِ الصُّنْدُوقِ وَيَحْجُبُهُ عَنِ الرُّؤْيَةِ تَمَامًا. يَبْدُو
الصُّنْدُوقُ نَظِيفًا، لَكِنَّ الكَلِمَاتِ المَقْصُوصَةَ لَنْ تَمْنَحَ
المُسْتَخْدِمَ أَيَّ طَرِيقَةٍ لِقِرَاءَتِهَا.
<!-- تَطْبِيقُ قِيمَةِ الإِخْفَاءِ -->
<div class="box hidden">
هَذَا النَّصُّ طَوِيلٌ جِدًّا وَسَوْفَ يَقُومُ المُتَصَفِّحُ بِقَصِّهِ فَوْرَ اِرْتِطَامِهِ بِالحَافَّةِ السُّفْلِيَّةِ.
</div>
<style>
.hidden {
overflow: hidden; /* بَتْرُ وَقَصُّ المَحْتَوَى الزَّائِدِ */
}
</style>
---
3. overflow: scroll (شَرِيطُ التَّمْرِيرِ الدَّائِمُ)
تَجْبُرُ قِيمَةُ scroll المُتَصَفِّحَ عَلَى إِظْهَارِ أَشْرِطَةِ
التَّمْرِيرِ (Scrollbars) الأُفُقِيَّةِ وَالعَمُودِيَّةِ حَوْلَ الصُّنْدُوقِ
بِشَكْلٍ دَائِمٍ، سَوَاءٌ كَانَ المَحْتَوَى زَائِدًا
وَيَحْتَاجُ إِلَيْهَا أَمْ لَا. إِذَا كَانَ النَّصُّ قَصِيرًا، سَتَظْهَرُ
الأَشْرِطَةُ مُعَطَّلَةً (بَاهِتَةً)، مِمَّا قَدْ يُؤَثِّرُ سَلْبًا عَلَى
جَمَالِيَّةِ التَّصْمِيمِ.
<!-- تَطْبِيقُ شَرِيطِ التَّمْرِيرِ الدَّائِمِ -->
<div class="box scroll">
هَذَا المَحْتَوَى سَيَمْنَحُكَ شَرِيطَ تَمْرِيرٍ، لَكِنَّ الأَشْرِطَةَ سَتَبْقَى حَاضِرَةً حَتَّى لَوْ فَرَغَ الصُّنْدُوقُ.
</div>
<style>
.scroll {
overflow: scroll; /* فَرْضُ ظُهُورِ الـ Scrollbar عَمُودِيًّا وَأُفُقِيًّا */
}
</style>
---
4. overflow: auto (شَرِيطُ التَّمْرِيرِ الذَّكِيُّ)
تُعْتَبَرُ قِيمَةُ auto الخِيَارَ الأَكْثَرَ ذَكَاءً
وَاِحْتِرَافِيَّةً لِمُطَوِّرِي الوِيبِ. حَيْثُ تَقُومُ بِإِيكَالِ المَهَمَّةِ
لِلْمُتَصَفِّحِ لِيَتَصَرَّفَ دِينَامِيكِيًّا؛ فَلَا يَظْهَرُ شَرِيطُ
التَّمْرِيرِ نِهَائِيًّا إِذَا كَانَ المَحْتَوَى مُنَاسِبًا لِحَجْمِ
الصُّنْدُوقِ، وَيَظْهَرُ فَقَطْ وَتِلْقَائِيًّا عِنْدَمَا يَفِيضُ النَّصُّ
وَيَحْتَاجُ المُسْتَخْدِمُ لِلتَّمْرِيرِ لِقِرَاءَتِهِ.
<!-- تَطْبِيقُ شَرِيطِ التَّمْرِيرِ الذَّكِيِّ -->
<div class="box auto">
نَصٌّ دِينَامِيكِيٌّ يَسْمَحُ بِظُهُورِ شَرِيطِ التَّمْرِيرِ عِنْدَ الحَاجَةِ إِلَيْهِ فَقَطْ حِمَايَةً لِلْمَظْهَرِ العامِّ.
</div>
<style>
.auto {
overflow: auto; /* شَرِيطُ تَمْرِيرٍ ذَكِيٌّ يَظْهَرُ عِنْدَ الحَاجَةِ */
}
</style>
---
تَجْزِئَةُ التَّحَكُّمِ: overflow-x وَ overflow-y
إِذَا كُنْتَ لَا تُرِيدُ تَعْيِينُ نَفْسِ السَّلُوكِ لِلِاتِّجَاهَيْنِ، تُتِيحُ لَكَ لُغَةُ CSS فَصْلَ المَحَاوِرِ الهَنْدَسِيَّةِ بِاحْتِرَافِيَّةٍ عَبْرَ الخَصَائِصِ الفَرْعِيَّةِ التَّالِيَةِ:
-
overflow-x: تَتَحَكَّمُ فِي الفَائِضِ الأُفُقِيِّ فَقَطْ (يَمِين/يَسَار) — مِثْلَ مَنَعِ خُرُوجِ الجَدَاوِلِ العَرِيضَةِ عَنْ شَاشَةِ الجَوَالِ. -
overflow-y: تَتَحَكَّمُ فِي الفَائِضِ العَمُودِيِّ فَقَطْ (أَعْلَى/أَسْفَل) — مِثْلَ إِنْشَاءِ صُنْدُوقِ دَرْدَشَةٍ ثَابِتِ الِارْتِفَاعِ وَيَسْمَحُ بِالنُّزُولِ لِلْأَسْفَلِ.
/* مِثَالٌ لِفَصْلِ المَحَاوِرِ */
.chat-container {
overflow-x: hidden; /* مَنَعُ التَّمْرِيرِ الأُفُقِيِّ تَمَامًا */
overflow-y: auto; /* السَّمَاحُ بِالتَّمْرِيرِ العَمُودِيِّ عِنْدَ كَثْرَةِ الرَّسَائِلِ */
}
---
جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ لِخَاصِّيَّةِ Overflow
لِمَسْحِ السُّلُوكِيَّاتِ البَصَرِيَّةِ لِجَمِيعِ القِيَمِ بِنَظْرَةٍ سَرِيعَةٍ:
| القِيمَةُ | مَظْهَرُ المَحْتَوَى الزَّائِدِ | حَالَةُ ظُهُورِ شَرِيطِ التَّمْرِيرِ (Scrollbar) |
|---|---|---|
visible |
يَخْرُجُ بَارِزًا خَارِجَ حُدُودِ الصُّنْدُوقِ تَمَامًا. | لَا يَظْهَرَ أَبَدًا. |
hidden |
يَتِمُّ قَصُّهُ وَبَتْرُهُ فَوْرًا، وَيُصْبَحُ مَخْفِيًّا. | Lَا يَظْهَرَ أَبَدًا. |
scroll |
يَتِمُّ اِحْتِوَاؤُهُ دَاخِلَ الصُّنْدُوقِ مَعَ إِمْكَانِيَّةِ التَّمْرِيرِ. | يَظْهَرُ دَائِمًا (أُفُقِيًّا وَعَمُودِيًّا) مَهْمَا كَانَ حَجْمُ النَّصِّ. |
auto |
يَتِمُّ اِحْتِوَاؤُهُ دَاخِلَ الصُّنْدُوقِ مَعَ إِمْكَانِيَّةِ التَّمْرِيرِ. | يَظْهَرُ فَقَطْ عِنْدَ الحَاجَةِ (إِذَا فَاضَ المَحْتَوَى فِعْلِيًّا). |
خُلَاصَةٌ
تُعَدُّ خَاصِّيَّةُ overflow الرَّكِيزَةَ الأَسَاسِيَّةَ
لِإِدَارَةِ مِسَاحَاتِ المَوْقِعِ وَحِمَايَةِ القَوَالِبِ مِنَ التَّشَوُّهِ
البَصَرِيِّ. فَهْمُكَ الدَّقِيقُ لِكَيْفِيَّةِ عَمَلِ كُلِّ قِيمَةٍ،
وَمَعْرِفَةِ مَتَى تَسْتَخْدِمُ التَّهْجِين الذَّكِيَّ عَبْرَ
overflow-y أَوْ auto، يَمْنَحُ مَشَارِيعَكَ
اِنْسِيَابِيَّةً عَالِيَةً وَيُؤَمِّنُ لِلْمُسْتَخْدِمِينَ تَجْرِبَةَ
تَصَفُّحٍ سَلِسَةً وَمُنَظَّمَةً عَبْرَ جَمِيعِ الأَجْهِزَةِ الرَّقْمِيَّةِ.