III 05 2010

Zapamatování pozice v divu při přenačtení stránky

napsal rudis | 0 Komentáře

= Remember a Div's Scroll Position

Je-li na stránce div s nastavenou vlastností stylu Overflow tak, aby byl obsah bloku div rolovatelný, nastává problém při přenačtení stránky vlivem události na stránce. Po tomto přenačtení se obsah bloku div vždy zobrazí na začátku.

V bloku Erica Pascarello jsem našel způsob, jak si div zapamatuje svojí pozici po její změně a při načtení stránky ji nastaví. Příklad zdrojového kódu ze stránek autora je níže.

<html>
  <head>
    <title>Fun Scroll</title>
    <style type="text/css">
      #divTest{width:150px;height:200px;overflow:auto}
    </style>
    <script type="text/javascript">
      window.onload = function(){
        var strCook = document.cookie;
        if(strCook.indexOf("!~")!=0){
          var intS = strCook.indexOf("!~");
          var intE = strCook.indexOf("~!");
          var strPos = strCook.substring(intS+2,intE);
          document.getElementById("divTest").scrollTop = strPos;
        }
      }
      function SetDivPosition(){
        var intY = document.getElementById("divTest").scrollTop;
        document.title = intY;
        document.cookie = "yPos=!~" + intY + "~!";
      }
    </script>
  </head>
  <body>
    <div id="divTest" onscroll="SetDivPosition()">
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      ERIC<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
    </div>
  </body>
</html>