Immer scrollen ein div-element und nicht die Seite selbst

Ich habe ein Seitenlayout mit einer inneren <div id="content"> element enthält wichtige Sachen auf der Seite. Der wichtige Teil über das design:

#content {
  height: 300px;
  width: 500px;
  overflow: scroll;
}

Nun, wenn der text enthalten ist, größer als 300px, ich muss in der Lage sein, um scrollen Sie es. Ist es möglich zu scrollen <div>, auch wenn die Maus nicht schwebt das element (Pfeil-Tasten sollten ebenfalls funktionieren)?

Beachten Sie, dass ich nicht wollen, deaktivieren Sie die 'global' scrolling: Es sollten zwei Scrollbalken auf der Seite, die Globale scrollbar und die Bildlaufleiste für die <div>.

Das einzige was sich ändert ist, dass die innere <div> sollte immer scrollen, es sei denn, es kann nicht mehr verschoben (in dem Fall die Seite sollte anfangen zu scrollen).

Ist das möglich irgendwie?

Bearbeiten

Ich denke, das problem war ein bisschen verwirrend, also werde ich anfügen einer Sequenz, wie ich es möchte, um zu arbeiten. (Khez geliefert bereits ein proof-of-concept.)

Dem ersten Bild ist, wie die Seite aussieht, wenn Sie geöffnet.

Nun, die Maus sitzt in der angezeigten position und Schriftrollen und was passieren sollte ist, dass

  • Zuerst das innere div scrollt den Inhalt (Abb. 2)
  • Das innere div hat fertig zu scrollen (Abb. 3)
  • Das body-element scrollt der div selbst wird verschoben. (Abb. 4)

Hoffe es ist etwas klarer jetzt.

Immer scrollen ein div-element und nicht die Seite selbst (Bild Dank gomockingbird.com)

  • Ich habe versucht, eine mit window.onscroll zu erfassen, die Veranstaltung. Es funktioniert aber definitiv zu wackelig. Haben Sie einen Blick auf meine jsfiddle. Nur posten Sie hier, weil vielleicht, nur vielleicht wird es Funken eine Idee in jemandes Geist.
  • eine min im arbeiten auf einer Geige für Ihre update
  • ich geschrieben eine Antwort auf dein update
InformationsquelleAutor Debilski | 2011-04-15
  1. 2

    Ich denke nicht, dass das möglich ist, ohne scripting, was könnte chaotisch sein, in Anbetracht der zahlreichen Veranstaltungen, die scroll-element (klicken, Scrollrad, unten, Leertaste).

    • Der scripting-Teil ist nicht das problem. Die Website wird nicht nutzlos sein, ohne diese Funktion, nachdem alle. Es ist schlimm, wenn es besonders chaotisch. Ich will nicht einführen zahlreichen bugs, ohne zu wissen, was ich Tue.
    • Akzeptieren dies, denn es ist die einzige Lösung ohne Nebenwirkungen.
    • die Lösung?
    InformationsquelleAutor alex
  2. 1

    Eine option könnte sein, mit Hilfe der jQuery scroll plugin. Ich weiß, es hat die Verfügbarkeit zu erstellen Scrollbalken auf einer div. Die einzige Sache, die Sie hinzufügen müssen, um sich selbst die Logik ist, die zu fangen die Ereignisse an, wenn die Tastatur gedrückt wird. Schauen Sie sich mal die keycodes für die Pfeil-Tasten und stellen Sie die div-scrollen Sie nach unten.

    Kann das plugin gefunden werden hier.

    Können Sie es verwenden, wie diese;

    <script type="text/javascript">
  //append scrollbar to all DOM nodes with class css-scrollbar
  $(function(){
    $('.css-scrollbar').scrollbar();
  })
</script>
    InformationsquelleAutor Rob
  3. 1

    hier ist eine Lösung, die funktionieren könnte: (fiddle: http://jsfiddle.net/maniator/9sb2a/)

    var last_scroll = -1;
$(window).scroll(function(e){
    if($('#content').scrollTop());
    var scroll = $('#view').data('scroll');
    if(scroll == undefined){
        $('#content').data('scroll', 5);
        scroll = $('#content').data('scroll');
    }
    else {
        $('#content').data('scroll', scroll + 5);
        scroll = $('#view').data('scroll');
    }
    /*
    console.log({
        'window scroll':$('window').scrollTop(), 
        'scroll var': scroll, 
        'view scroll':$('#view').scrollTop(),
        'view height':$('#view').height(),
        'ls': last_scroll 
    });
    //*/
    if(last_scroll != $('#content').scrollTop()){ //check for new scroll
        last_scroll = $('#content').scrollTop()
        $('#content').scrollTop($('#content').scrollTop() + scroll);

        $(this).scrollTop(0);
        //console.log(e, 'scrolling');
    }

})

    Es ist ein bisschen buggy, aber es ist ein Anfang 🙂

    • Ich denke, das Hauptproblem mit allen Ansätzen, die darauf warten für ein scroll-Ereignis ist: es wird nicht funktionieren, wenn Körper nicht scrollen.
    • was meinst du?
    • Es wird nur eine $(window).scroll Ereignis, wenn es eine "physische" Blättern des Körpers. Wenn der Körper ist klein genug, um den Bildschirm passen, passiert nichts.
    • ja das ist wahr... hmmmmm
    InformationsquelleAutor Neal
  4. 0

    Nur so, ich glaube, Sie können dies erreichen, ist durch die Verwendung von frames.

    Frames - W3Schools Referenz

    • Frames und W3Schools in der gleichen Antwort? 😛
    • Es war eine Herausforderung, um Sie beide in ;P
    • Der link tut nicht wirklich zeigen kann, wie ich möchte erreichen, das mit frames. Aber da es keine option ist, trotzdem ich nicht wirklich wissen müssen. 😉
    • Sie würden nur setzen Sie die Höhe des Frames mit CSS und wenn die Seite enthalten, in der es erfordert, dann ist der Scrollbalken erscheint automatisch 🙂 aber okay, goos Glück bekommen es getan.
    • Die scrollbar erscheint perfekt mit einer reinen div-Lösung. Das problem ist, dass ich scrollen möchten es ohne schwebt es.
    • Entschuldigung, habe ich falsch verstanden.

    InformationsquelleAutor Ollie
  5. 0

    Wenn Sie nur wollen, haben eine Feste Position "div" und scrollen Sie, nur Sie, vielleicht könnten Sie einen trick, wie:

    http://jsfiddle.net/3cpvT/

    Scrollen mit Mausrad und alle Arten von Schlüsseln funktioniert wie erwartet. Nur die Sache ist, dass die Bildlaufleiste auf das Dokument Körper nur.

    InformationsquelleAutor Qtax
  6. 0

    Ich habe eine Lösung gefunden... Nicht perfekt... http://jsfiddle.net/fGjUD/6/.

    CSS:

    body.noscroll {
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

    JS (jQuery):

    if ($("body").height() > $(window).height()) {
    var top;
    $('#scrolldiv').mouseenter(function() {
        top = $(window).scrollTop();
        $('body').addClass('noscroll').css({top: -top + 'px'});
    }).mouseleave(function() {
        $('body').removeClass('noscroll');
        $(window).scrollTop(top);
    });
}

    Den Textumbruch problem kann gelöst werden, setzen Sie den gesamten Inhalt in die Feste Breite div. Es ist ein weiterer Fehler für IE-browser. Wenn die Seite zentriert backgrond, es bewegt sich Links-rechts auf mouseenter auf #scrolldiv

    InformationsquelleAutor Pavel Tzonkov
Schreibe einen Kommentar