Поддержание положения прокрутки в двух столбцах при перезагрузке

Question

Отчаянно протягивая руку прямо сейчас!

Наша веб-страница содержит три столбца с тремя разными div: «primary», «main» и «secondary».

Я хотел был бы поддерживать scrollpositions все divs on reload. Для первого столбца «primary» я использую этот скрипт ниже, который работает как шарм.

Я знаю, что 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 + "~!"; 
} 

Answer 1

То, как вы установите печенье, кажется, создан в первую очередь для одного элемента - Я хотел бы изменить это так, что вы можете установить куки значение ключа спаривания.

Используя некоторые функции для получения и установки куки, я бы тогда изменить код на:

//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'); 
 
}