Forum PHP.pl > Przewijanie diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

peterekkk

9.09.2012, 21:11:53

Witam,
szukałem w internecie ale nie mogę znaleźć rozwiązania na nurtujący mnie problem.
Mam stronę, która nie ma paska przewijania po prawej stronie przeglądarki bo po prostu jest za krótka aby ją przewijać, ale zrobiłem na środku strony diva z treścią, którą się przewija. Aby przewijać tego diva należy najechać na niego kursorem i kręcić scrollem, ale moje pytanie jest następujące: czy dałoby się zrobić tak, aby niezależnie od położenia kursora na stronie, poprzez kręcenie scrollem div z treścią był przewijany zamiast domyślnie całej strony? Innymi słowy: chciałbym aby poprzez kręcenie scrollem domyślnie nie przewijała się cała strona tylko div z zawartością.

kamil4u

9.09.2012, 21:31:36

http://www.sitepoint.com/forums/showthread...the-mouse-wheel + scrollTop + trochę myślenia i uda Ci się to złożyć do kupy. W razie problemów pisz

peterekkk

9.09.2012, 22:25:03

Coś już świeci ale to jeszcze nie to, potrzebowałbym aby zawartość diva się przewijała, a gdybym chciał dać takiego boxa który się przewija przez scrolla to musiałbym uzyć position: absolute, przez co treść zawarta w divie by po prostu z niego "wychodziła" i nie otrzymam zamierzonego efektu. Jakieś inne propozycje?

kamil4u

9.09.2012, 22:33:36

Zacytuję siebie:

Cytat

http://www.sitepoint.com/forums/showthread...the-mouse-wheel + scrollTop + trochę myślenia i uda Ci się to złożyć do kupy.

Dostałeś prawie gotowy kod, ale niestety nie zmusiłeś się do myślenia i analizy go. Dlatego wydaje Ci się, że to co Ci dałem to nie to. Szkoda... mógłbyś się przy tym czegoś nauczyć z JS...

Gotowiec:

Kod

<div id="test" style="width: 200px; height: 100px; overflow: scroll;">

 

</div>

<script>
window.onload = function()
{
 //adding the event listerner for Mozilla
 if(window.addEventListener)
 document.addEventListener('DOMMouseScroll', moveObject, false);

 //for IE/OPERA etc
 document.onmousewheel = moveObject;
}
function moveObject(event)
{
 var delta = 0;

 if (!event) event = window.event;

 // normalize the delta
 if (event.wheelDelta) {

 // IE and Opera
 delta = event.wheelDelta / 30;

 } else if (event.detail) {

 // W3C
 delta = -event.detail;
 }

 var currPos=document.getElementById('test').scrollTop;

 //calculating the next position of the object
 currPos=parseInt(currPos)-(delta*10);

 //moving the position of the object
 document.getElementById('test').scrollTop = currPos;
}

</script>

--edit--
No chyba, że w ogóle nie znasz JS. Ale wtedy mogłeś się zapytać o co dokładnie mi chodziło i jak ja to widzę.

peterekkk

10.09.2012, 07:08:13

Faktycznie mniej jestem obeznany w JS, ale dopiero teraz zauważyłem że rzeczywiście wystarczyło niewiele aby przerobić ten kod na moje potrzeby. Anyway dzięki za pomoc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.