HTML/CSS yatay,dikey kaydırma çubuğu kodu kullanımı örneği (HTML/CSS horizontal,vertical scroll bar code usage example)

HTML de yatay ve dikey kaydırma çubuklarını (scroll bars) ekranda göstermek,ekrana eklemek için “style” ın “overflow”(taşma) özelliğini kullanabilirsiniz.

Aşağıda örnek kodlar ile CSS “overflow” özelliğinin nasıl kullanıldığı gösterimi sağlanmıştır, kısaca izah edecek olursak şöyledir:

overflow: visible nedir:
Kaydırma çubuğu özelliği kazandırmak istemezseniz, bulunduğunuz alanda yazılarınız taşma yapacaktır. “visible” kullanabilirsiniz.

style="overflow: visible;"

overflow: hidden nedir:
Kaydırma çubuklarını görmek istemezseniz taşma olmayacak kaplanan alan kadar ekranda görecek ve yazınızın devamı ekranda olmayacaktır. “hidden” kullanabilirsiniz.

style="overflow: hidden;"

overflow: scroll ne iş yapar:
Kaydırma çubuklarını görmek isterseniz ekranda taşma olmasada kalacak şekilde, “scroll” kullanabilirsiniz.

style="overflow: scroll;"

overflow: auto ne işe yarar:
Kaydırma çubuklarını taşma olduğunda görmek isterseniz, “auto” kullanabilirsiniz.

style="overflow: auto;"

overflow-x: ne işe yarar:
Sadece yatay kaydırma çubuğu özelliğini ifade eder.

style="overflow-x: auto;"

overflow-y: ne işe yarar:
Sadece dikey kaydırma çubuğu özelliğini ifade eder.

style="overflow-y: auto;"

Bütün HTML kodunu alıp .html dosyası şeklinde tarayıcılarda çalıştırabileceğiniz kayan çubuk örneğimiz aşağıdadır.

scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net
visible – scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net





hidden – scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net


scroll – scroll bar


auto – scroll bar

auto – scroll bar taşma olan yazı örneği yazilimcity.net kaydırma çubuğu(scroll) değerinin ‘auto’ olması durumunda taşma olmadığı sürece ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar


<!DOCTYPE html>
<html>
<head>
<title> scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net </title>
<meta charset="UTF-8">
</head>
<body>

<!--kaydırma çubuğu(scroll bar) degerinin 'visible' olması ile hiç kaydırma çubuğu(scroll bar) değeri vermemeniz aynı şeyi ifade eder-->
<div id="scrollVisibleDefault"
style="overflow: visible; width: 100px; height:100px; border-style:solid; border-width:2px;">
visible - scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net
</div>

<br>
<br>
<br>
<br>
<br>

<!--kaydırma çubuğu(scroll bar) değerinin 'hidden' olması ile herhangi bir dışa taşma durumunda
kaydırma çubukları(scroll bars) olmayacak ve ilgili alanın boyutu kadar görünüm olacaktır-->
<div id="scrollHidden"
style="overflow: hidden; width: 100px; height:100px; border-style:solid; border-width:2px;">
hidden - scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net
</div>

<br>
<br>

<!--kaydırma çubuğu(scroll) değerinin 'scroll' olması durumunda herhangi bir taşma olmasa dahi
yatay ve dikey kaydırma çubukları(scroll bars) ekranda görünecek ve taşma olma durumunda aktif olacaklardır-->
<div id="scrollScroll"
style="overflow: scroll; width: 100px; height:100px; border-style:solid; border-width:2px;">
scroll - scroll bar
</div>

<br>
<br>

<!--kaydırma çubuğu(scroll) değerinin 'auto' olması durumunda taşma olmadığı sürece
ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar-->
<div id="scrollAuto"
style="overflow: auto; width: 100px; height:100px; border-style:solid; border-width:2px;">
auto - scroll bar
</div>
<br>
<!--kaydırma çubuğu(scroll) değerinin 'auto' olması durumunda taşma olmadığı sürece
ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar-->
<div id="scrollAuto"
style="overflow: auto; width: 100px; height:100px; border-style:solid; border-width:2px;">
auto - scroll bar taşma olan yazı örneği yazilimcity.net
kaydırma çubuğu(scroll) değerinin 'auto' olması durumunda taşma olmadığı sürece
ekranda kaydırma çucukları alanları görülmeyecek taki taşma olana kadar
</div>

<br>
<br>

<!--satır içi çerçeve (iframe) de zaten kaydırma çubuğu(scroll) özelliği varsayılan olarak mevcuttur.-->
<iframe id="yazilimCityNetIFrameId" src="http://yazilimcity.net/htmlcss-yataydikey-kaydirma-cubugu-kodu-kullanimi-ornegi-htmlcss-horizontalvertical-scroll-bar-code-usage-example/"
style="width: 200px; height: 300px; border-style:solid; border-width:5px;">
iframe default - scroll bar vertical and horizontal | kaydırma çubuğu yatay ve dikey | www.yazilimcity.net
</iframe>
</body>
</html>

2 thoughts on “HTML/CSS yatay,dikey kaydırma çubuğu kodu kullanımı örneği (HTML/CSS horizontal,vertical scroll bar code usage example)

Leave a Reply

Your email address will not be published. Required fields are marked *