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.

<!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://www.yazilimcity.net"
	        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>
Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

1 Comment

  1. bjk says: Reply

    hocam sağa sola değilde aşağı yukarı nasıl yapılır

Leave a Reply


*