ScrollBox ထည္႔ နည္း

Aားလုံးပဲ မဂၤလာပါ.
ဒီတစ္ခါေတာ႔ ကၽြန္ေတာ္တုိ႔ရဲ႔ ဘေလာ႔ဂ္ေလးေတြ၊ ၀က္ဘ္ဆုိဒ္ေလးေတြထဲမွာ Scroll Box ေလးေတြ
ထည္႔နည္းကုိ ေျပာျပခ်င္ပါတယ္.
Aရင္ဆုံး ဒါေလးကုိ မေလ႔လာခင္ Scroll box ေလးေတြ ဆုိတာ ဘာလဲ. ဘယ္လုိေနရာမွာ
Aသုံး၀င္ႏုိင္သလဲ ဆုိတာေလးကုိ Aရင္စU္းစားၾကည္႔လုိက္ၾကရေAာင္.
ကဲဗ်ာ.
ခင္ဗ်ားက စာပုိဒ္Aရွည္ၾကီးတစ္ခုကုိ AကုိးAကားAေနနဲ႔ ျပခ်င္တယ္. Aကုန္လုံးကုိ
ရုိက္ျပလုိက္ရင္လည္း ခင္ဗ်ားရဲ႔ ပုိ႔စ္က Aရွည္ၾကီး ျဖစ္သြားမယ္. Aဲလုိမ်ိဳးဆုိရင္ ခင္ဗ်ားေပးခ်င္တဲ႔
မက္ေဆ႔ခ်္က ေ၀၀ါးသြားမယ္. ခင္ဗ်ားလုပ္ခ်င္တာက Aဲဒီ႔ AကုိးAကား စာပုိဒ္ေလးကို
ထည္႔ေပးထားျပီး စာဖတ္သူက ဖတ္ခ်င္ရင္ Scroll Down/Up လုပ္ျပီး ဖတ္၊ တကယ္လုိ႔ ဓာတ္ပုံေတြ
Aမ်ားၾကီး တင္ခ်င္တယ္ဆုိရင္လည္း ဒီလုိ Scroll box ေလးထဲ ထည္႔ျပီး ျပထားလုိက္ရင္ ဓာတ္ပုံ
Aယ္လ္ဘမ္ တစ္ခု ပုံစံမ်ိဳးေလး ဖန္တီးလုိ႔ရမယ္၊ စာဖတ္သူက ပုံေတြကုိ သူလုိသလုိ၊ ၾကိဳက္သလုိ
Scroll Down/Up လုပ္ျပီး ၾကည္႔. ဒါမ်ိဳးေပါ႔ဗ်ာ.
Aဓိကကေတာ႔ Space ကုိ Aတတ္ႏုိင္ဆုံး က်ဳံ႔လုိက္ျပီး ေပးခ်င္တဲ႔ Aေၾကာင္းAရာကုိ သိသာ
ထင္ရွားေအာင္ လုပ္ေပးတာပါပဲ.ဥပမာေလးကုိ ဒီမွာၾကည္႔ပါ.
မင္းရဲ႔ ဆံႏြယ္ေခြေတြထဲမွာ
တစ္ညတာေလာက္ အိပ္စက္ခြင္႔ရမယ္ဆုိရင္
ငွက္ငယ္ေတြ ၀န္းရံေနတဲ႔
သစ္တစ္ပင္Aျဖစ္ကုိေတာင္ စြန္႔လႊတ္၀ံ႔တယ္.
မယုံရင္ ဒီမွာၾကည္႔စမ္း
လြမ္းလြန္းလုိ႔ ျဖစ္လာတဲ႔
မင္းAတြက္ Aခ်စ္ပန္း…

ကဲ. ဘယ္လုိလုပ္ရမလဲ ဆုိေတာ႔ ဒီလုိလုပ္ပါ ခင္ဗ်ာ…
Aခု ကၽြန္ေတာ္ေပးလုိက္မယ္႔ Coding ေလးကုိ ေလ႔လာၾကည္႔ပါ.
Your Text Here ဆုိတဲ႔ေနရာမွာ ကုိယ္တင္ျပခ်င္တဲ႔ စာပုိဒ္ေလး၊ ဓာတ္ပုံ စတာေတြကုိ ပုံမွန္Aတုိင္း
ရိုက္တင္၊ Upload လုပ္ လုပ္ပါ.
Aဲဒါပါပဲ.
ဒါဆုိရင္ကိုပဲ Scroll Box ေလး တင္နည္း ျပီးပါျပီ.
ဟင္. ဒါပဲလားဆုိေတာ႔ မဟုတ္ေသးပါဘူး.
Aေသးစိတ္ရွင္းျပပါမယ္. ဒါမွ ကုိယ္လုိသလုိ Aက်င္းAက်ယ္ ျပဳျပင္ယူႏုိင္မွာေပါ႔ဗ်ာ.
<div style="border: 3px solid green; overflow: auto; height: 100px; width: 150px;
color: black; background-color: white;">YOUR TEXT HERE</div>
Border: 3px solid green
Aဲဒါေလးက ဘာေျပာလဲ ဆုိေတာ႔ Box Aစိမ္းေရာင္ေလး တစ္ခုလုပ္မယ္. ေဘာင္ကုိ 3 pixel
Aထူေပးမယ္လုိ႔ ဆုိလုိပါတယ္. Aေရာင္ေတြ Aမ်ိဳးမ်ိဳး ေျပာင္းယူႏုိင္သလုိ border ကုိလည္း
Dashed တုိ႔ Dotted တုိ႔ စသျဖင္႔ ေပးႏုိင္ပါတယ္.
height:100px , width:150px
ဒါေလးကေတာ႔ Box ေလးရဲ႔ Aျမင္႔နဲ႔ Aက်ယ္ကုိ ေျပာပါတယ္. နံပါတ္ေလးေတြကုိ လုိသလုိ
ကစားၾကည္႔ျပီး ကုိယ္႔စိတ္ၾကိဳက္ Box Aရြယ္Aစားေလးကုိ ဖန္တီးယူႏုိင္ပါတယ္. color:black
ဒါကေတာ႔ Box ေလးထဲမွာ ေပၚမယ္႔ စာသားေလးေတြရဲ႔ Aေရာင္ပါ. Red, Orange, Green စသျဖင္႔
စိတ္ၾကိဳက္ေျပာင္းေပးႏုိင္ပါတယ္.
background-color:white
ဒါကေတာ႔ Box ေလးရဲ႔ ေနာက္ခံ Aေရာင္ပါ. ကုိယ္ေရြးခ်ယ္တဲ႔ ေနာက္ခံ Aေရာင္နဲ႔ Text
Aေရာင္ကုိ လုိက္ဖက္ေအာင္ ေရြးခ်ယ္ေပးသင္႔ပါတယ္. ဥပမာ.အ ျဖဴေနာက္ခံမွာအမည္းစာလုံးေပၚေအာင္ လုပ္သလုိမ်ိဳးေပါ႔ဗ်ာ.
ကဲ. ဒီေလာက္ပါပ