在重新加载时保持两列中的滚动位置

时间:2016-10-12 10:16:41

标签: javascript html css

现在拼命地伸出这里!

我的网页包含三列,包含三个不同的div:“primary”,“main”和“secondary”。

我想在重新加载时保持所有 div的滚动位置。 对于第一列“主要”我正在使用下面的这个脚本,这对lika来说很有魅力。

我知道getElementbyID只能获得一个div,所以我怎么可能这样做?

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("primary").scrollTop = strPos;
  }
}

function SetDivPosition() {
  var intY = document.getElementById("primary").scrollTop;
  document.cookie = "yPos=!~" + intY + "~!";
}

1 个答案:

答案 0 :(得分:0)

您设置Cookie的方式似乎主要针对一个项目设置 - 我会更改此设置,以便您可以通过键值配对来设置Cookie。

使用一些函数来获取和设置cookie,然后我会将您的代码更改为:



//add cookie functions
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

//I am assuming you will have some sort of on scroll function for setting your cookie.  Change this to a function so you can bind it multiple times
function bindScrollEvent(elementId) {
  var element = document.getElementById(elementId);
  
  element.onscroll = function() {
    setCookie(elementId, element.scrollTop); // use the element id to set the cookie to the scrolltop value
  };
  
  // once the event is bound, you can set it's current scroll position
  var scrollTopPosition = getCookie(elementId);
  
  if (scrollTopPosition !== '') {
    element.scrollTop = scrollTopPosition;
  }
}

// reload the div positions when the document loads
window.onload = function() {
  bindScrollEvent('primary');
  bindScrollEvent('secondary');
  bindScrollEvent('main');
}
&#13;
&#13;
&#13;