Alul-felül scrollbar

Alul-felül scrollbar

Alul-felül scrollbar

Egy érdekes mini projekt keretében felmerült egy olyan kérés, hogy mi lenne ha a görgethető doboz alján és tetején is lenne görgetősáv. Elsőre vakartam a fejem, hogy ezt hogy is lehetne kivitelezni. Persze kreatív ember lévén biztos voltam abban, hogy erre is találok megoldást és így is lett.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare velit metus, non pharetra enim pharetra quis. Pellentesque euismod commodo ipsum sed ullamcorper. Nunc velit arcu, placerat vitae aliquet eget, vestibulum non lectus. Sed non fringilla libero. Nunc vel commodo eros. Cras hendrerit nisi sit amet consequat imperdiet. Donec ut arcu ut ligula congue commodo.

Ugye alap esetben a görgetősáv a görgethető doboz jobb oldalán, illetve alján szokott elhelyezkedni. Ezt nem is tudjuk átdefiniálni, ellenben új görgetősávot hozzá tudunk adni, aminek a mozgatására tudunk scriptet írni.

HTML


<div class="wrapper1">
	<div class="div1"></div>
</div>
<div class="wrapper2">
	<div class="div2">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare velit metus, non pharetra enim pharetra quis. Pellentesque euismod commodo ipsum sed ullamcorper. Nunc velit arcu, placerat vitae aliquet eget, vestibulum non lectus. Sed non fringilla libero. Nunc vel commodo eros. Cras hendrerit nisi sit amet consequat imperdiet. Donec ut arcu ut ligula congue commodo.</p>
	</div>
</div>

CSS


.wrapper1, .wrapper2 {
	width: 100%;
	border: 0px;
	overflow-x: scroll;
	overflow-y: hidden;
}

.wrapper1 {
	height: 20px;
}

.wrapper2 {
	height: 200px;
}

.div1 {
	width: 1000px;
	height: 20px;
}

.div2 {
	width: 1000px;
	height: 200px;
	background-color: #eeeeee;
	overflow: auto;
}

Eddig létrehoztunk 2 tároló dobozt egymás alá. Az alsó tárolja a megjeleníteni kívánt tartalmat, illetve az alsó görgetősávot. A felső tároló, pont ugyan olyan széles, mint az alsó, hogy a görgetősáv megjelenjen és megfelelő méretű legyen. Ezen felül pedig a felső tároló magassága pont a görgetősáv magasságával egyezik meg, mert nekünk csak arra van szükségünk, hogy azt lássuk.

Na jó, de ettől még ez hogyan fog párhuzamosan görgetni?

JavaScript


<script type="text/javascript">
$(document).ready(function() {
	$('.wrapper1').scroll(function(){
		$('.wrapper2').scrollLeft($(".wrapper1").scrollLeft());
	});
	$('.wrapper2').scroll(function(){
		$('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
	});
});
</script>

A megoldás egyszerű. A "scroll" függvény a jobbra-balra görgetés eseményére hívódik meg és lekérdezhető a "scrollLeft" segítségével, hogy az horizontális görgetősáv jelenleg mennyire van eltolva. Ezt követően annyi csupán a dolgunk, hogy ha a felsőt csúsztatja el valaki, lekérdezzük a felső görgetősáv helyzetét és ezt akapott paramétert átadjuk az alsónak és ugyan ezt fordítva is megtehetjük. Ezáltal bármelyik görgetősávot is mozgatjuk az párhuzamosan fog mozogni.

Nagyszerű, de mi van ha nekem csak felülre kell és alulra nem?

A megoldás változatlan. Mindössze annyit kell tennünk, hogy elrejtjük az alsó görgetősávot. De attól még, hogy nem jelenik meg a funkciója nem veszik el.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ornare velit metus, non pharetra enim pharetra quis. Pellentesque euismod commodo ipsum sed ullamcorper. Nunc velit arcu, placerat vitae aliquet eget, vestibulum non lectus. Sed non fringilla libero. Nunc vel commodo eros. Cras hendrerit nisi sit amet consequat imperdiet. Donec ut arcu ut ligula congue commodo.

CSS


.wrapper1, .wrapper2 {
	width: 100%;
	border: 0px;
	overflow-y: hidden;
}

.wrapper1 {
	height: 20px;
	overflow-x: scroll;
}

.wrapper2 {
	height: 200px;
	overflow-x: hidden;
}

.div1 {
	width: 1000px;
	height: 20px;
}

.div2 {
	width: 1000px;
	height: 200px;
	background-color: #eeeeee;
	overflow: hidden;
}

Ennek viszont ára van

Mivel a görgetés minden pillanatában számlásokat kell végezzen a böngésző és ezt kell adni az ellentétes oldalon található görgetősávnak, felmerülhet némi lassulás. Ez nem akkor jelentkezik, amikor szeretnénk az egér bal gomjával elhúzni a a görgetőt, hanem amikor az egerünk középső gombját folyamatosan nyomva tartva balra-jobbra próbálunk haladni. Ekkor ugyanis mind a két görgetősávot egyszerre próbálja meg használni és mind a kettő egyszerre szeretne pramétert átadni a másiknak. Emiatt a dupla számolási és értékátadási művelet miatt lassulás tapasztalható.

Demo letöltése

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.

Oszd meg barátaiddal is!

Facebook Twitter Linkedin

Elérhetőségeink

  • Címünk: 1139 Budapest, Frangepán utca 3. (1. emelet)

  • Ügyfélfogadás, beiratkozás: Hétfőtől - péntekig: 09:00-17:00

  • Telefonszámunk: 06 70 604 2060, vagy 06 1 4500 110

  • E-mail címünk:

Közösségünk