Przewijanie diva, Domyślne przewijanie diva a nie całej strony Opcje

[peterekkk]

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]

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 (IMG:style_emoticons/default/smile.gif)

Ten post edytował kamil4u 9.09.2012, 21:31:53

[peterekkk]

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? (IMG:style_emoticons/default/smile.gif)

Ten post edytował peterekkk 9.09.2012, 22:25:16

[kamil4u]

Zacytuję siebie:

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;">

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

</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ę.

Ten post edytował kamil4u 9.09.2012, 22:37:21

[peterekkk]

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 (IMG:style_emoticons/default/smile.gif)