Bu yazımızda, JQuery'inin nesne pozisyonlarına ulaşma ve nesne pozisyonlarını değiştirme özelliklerine kısaca bir göz atıp, scroll kontrol uygulaması yapacağız.
Dom Nesneleri Pozisyon Fonksiyonları:
- .offset(): //Nesnenin sol(left) ve üst(top) değerlerine göre koordinatları alınır ve değiştirilir
- .position(): //Nesnenin bir üst düzey nesnesine göre koordinatları alınır ve değiştirilir.
- .scrollTop(): //Dikey kaydırma çubuğunun üstten pozisyon değeri alınır veya değiştirilir.
- .scrollLeft(): //Yatay kaydırma çubuğunun soldan pozisyon değeri alınır veya değiştirilir.
Uygulama:
Bu uygulamamızda sayfamızda bulunan bir alanın "overflow ve scroll" özelliğini kullanarak, pozisyon değerini "report" id'li alana yazdıracağız.
Aşağıdaki alandaki yazıyı aşağı doğru kaydırdığınızda, değerler "report" katmanında görüntülenecektir. Ayrıca "Yukarı" ve "Aşağı" butonlarıyla da yazıyı kaydırabilirsiniz.
Lorem ipsum dolor sit amet, haec sed quod tamen adnuente rediens eam in. Mea vero quo accumsan in rei exultant deo. Dabo es audito claudi in deinde cepit roseo ruens sed quod eam in lucem concitaverunt in rei sensibilium. Stranguillioni incommunicabile ait Cumque ego illum, nunc eius est amet consensit cellula filia puella! Imas rebum scias haec puella est in modo. Perihermeneias Apollonium illis Verena ad te, horreo Athenagora mihi servitute meam contra serpentibus. Scelus quod eam ad per accipere sibi aperit honestate doctrinam.
Ipsa Invitamus me missam ne civitatis intelligitur sicut autem est in. Inter tua cupididate flebili Miserere cum autem illud hendrerit, patrem in rei sensibilium acciperem qui dicens unam. Interposito brutis aeternae reversurus eum ego. Nullam coepit amatrix tolle mei virginitati tibi afferri magistrum monumentum fecissent. Iuvenem in lucem exempli paupers coniunx efficerer nuptiarum condono, possit ei primum subsannio oculos capillos apto tempus remuneretur sermonis conloquium habitus. Rogavit non potentiae quem suis alteri ad suis Tyrium coniugem Chaldaeorum in deinde cepit roseo ruens sed. Modum cognoscibilis ait in fuerat construeret cena! Neptunus spatia tribulatione ad te sed haec puella ut libertatem petitiones, communicabilis sicut in fuerat est in lucem in fuerat. Dionysiade in modo compungi mulierem volutpat cum suam ad suis alteri si mihi servitute coniunx. Aderit omnia salva deus Hellenici silentio sit in lucem genero coruscus eum istam provoces Athenagora deo adiuves finem. Stranguillio in rei civibus laude clamaverunt donavit hoc. Istis dotis polluta qui dicens hoc. Domus ad quia iuvenis est se sed dominum oculos. Mancipia dolor Jesus Circumdat flante vestibus regni, altera quod non solutionem invenisti naufragus ferro dolor exposuisset. Filiam sunt forma non ait in.
Lorem ipsum dolor sit amet, haec sed quod tamen adnuente rediens eam in. Mea vero quo accumsan in rei exultant deo. Dabo es audito claudi in deinde cepit roseo ruens sed quod eam in lucem concitaverunt in rei sensibilium. Stranguillioni incommunicabile ait Cumque ego illum, nunc eius est amet consensit cellula filia puella! Imas rebum scias haec puella est in modo. Perihermeneias Apollonium illis Verena ad te, horreo Athenagora mihi servitute meam contra serpentibus. Scelus quod eam ad per accipere sibi aperit honestate doctrinam.
ScrollTop: Buraya değer gelecek...
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:330px;
padding:5px;
clear:both;
}
#overflow_text{
overflow-y:auto;
overflow-x:hidden;
width:360px;
height:300px;
}
HTML yapısı:
<div id="area_product">
<div id="overflow_text">
<p>Bu kısma uzun bir yazı eklemeniz gerekir...</p>
</div>
</div>
<div id="report"><strong>ScrollTop:</strong> <span>Buraya değer gelecek...</span></div><br />
<button id="scroll_top">Yukarı</button> <button id="scroll_down">Aşağı</button>
JQuery Kodları:
<script type="text/javascript">
$(document).ready(function(){
//Sayfa kaydrıldığında .scroll() olayı tetikleniyor
$("#overflow_text").scroll(function(){
$("#report span").html($(this).scrollTop());
});
//Yukarı butonuna basılınca 20px artırılarak aşağı kaydırılıyor
$("#scroll_top").click(function(){
var scroll_top=$("#overflow_text").scrollTop();
$("#overflow_text").scrollTop(scroll_top-20);
});
//Aşağı butonuna basılınca 20px artırılarak aşağı kaydırılıyor
$("#scroll_down").click(function(){
var scroll_top=$("#overflow_text").scrollTop();
$("#overflow_text").scrollTop(scroll_top+20);
});
});
</script>
Açıklamalar:
Gerekli açıklamalar kodların üzerinde yapılmıştır.
- Yazının bulunduğu alanın css kodlarındaki "overflow" özelliğine dikkat edin, yazınız alanınızdan yüksek olmalı ki "scroll"özelliği gerçekleşsin.
Kolay gelsin, görüşmek üzere...
