Pflegen div scroll position beim postback mit html/javascript

Gibt es eine Möglichkeit zur Aufrechterhaltung der div-scroll-position auf einem postback ohne den Einsatz von asp? Bisher habe ich nur Lösungen gefunden, die den Einsatz von asp.

InformationsquelleAutor ostrgard | 2011-02-08
  1. 0

    http://blogs.x2line.com/al/articles/156.aspx

    <!doctype html>
<html>
<head>
<title></title>

<script language="javascript">
    //function saves scroll position
    function fScroll(val)
    {
        var hidScroll = document.getElementById('hidScroll');
        hidScroll.value = val.scrollTop;
    }

    //function moves scroll position to saved value
    function fScrollMove(what)
    {
        var hidScroll = document.getElementById('hidScroll');
        document.getElementById(what).scrollTop = hidScroll.value;
    }
</script>
</head>

<body onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>

<form>

<input type="text" id="hidScroll" name="a"><br>
<div id="div_scroll" onscroll="fScroll(this);" style="overflow:auto;height:100px;width:100px;">

   .. VERY LONG TEXT GOES HERE

</div>
</form>
</body>
</html>
    • Ich habe versucht die Einrichtung, seinem Beispiel zu Befüllen mit lipsum, und es schien nicht zu funktionieren scheint. Die Kommentare auf der Seite Quelle den klingen nicht allzu vielversprechend entweder. Hast du es versuchen?
    InformationsquelleAutor Doug Chamberlain
  2. 0

    Vielleicht diesem javascript-code funktioniert für Sie

            function loadScroll ()
        {
            var m = /[&?]qs\=(\d+)/.exec (document.location);
            if (m != null)
                myDiv.scrollTop = parseInt (m[1]);
        }

        function saveScroll ()
        {
            var form = document.getElementById ("myForm");
            var sep = (form.action.indexOf ("?") == -1) ? "?" : "&";
            form.action += sep + "qs=" + myDiv.scrollTop;
        }

    Nun, Sie können, achten Sie auf die "submit" - Ereignis das speichern der position in den "action" - Attribut:

            document.getElementById ("myForm").addEventListener ("submit", saveScroll, false);

    Und in Ihren BODY-tag...

    <body onload="loadScroll ();">
    ....
</body>

    Kann ich nicht testen, der code jetzt, aber ich denke, Sie bekommen die Idee.

    InformationsquelleAutor Luis Medel
Schreibe einen Kommentar