如何为Jquery Mobile页面保存当前滚动位置的偏移量 [英] how to save the offset of current scroll position for Jquery Mobile page

问题描述

我试图将页面当前值的偏移量保存在全局变量中，并尝试使用它来在重新加载页面时滚动回到相同位置.

I am trying to save the offset of the current value of the page in a global variable and trying to use it for scrolling back to the same position when page is reloaded .

这是我的代码

<script>
$(document).on("pagebeforeshow", '#outerPage', function(){
    $(document).on('vclick','#outerPage',function(e){
   //alert('yo i am clickable now'); 

    var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
   storePosition.topCoordinate = relY;   
});
    var  positionY = storePosition.topCoordinate ;     
    if(positionY !== null) {

        setTimeout(function () {
        $.mobile.defaultHomeScroll = positionY;
    }, 10); 
    }
});

var storePosition = {
    topCoordinate : null
}
</script>

在这里，我尝试将偏移量存储在storePosition.topCoordinate中，然后在函数中使用它来设置页面滚动.但是我的变量始终设置为null我不明白为什么会这样.

Here I am trying to store the offset in storePosition.topCoordinate then use it in the function to set the page scroll . but my variable is always set to null I dont understand why this is happening .

更新

现在我正在使用类似这样的脚本

For now I am using the a script something like this

$(document).on('pageinit', '#outerPage', function () {
    $('a').on('vclick', function () {
        console.log('its done Boy');
        localStorage.setItem('scrolls', 0);

    });

});

/*$(window).on('unload', function() {
    console.log(window.location.pathname);
    console.log(window.location.pathname);
    console.log( "Bye now!" );
})*/

$(document).on('pageinit', '#outerPage', function () {
    $(document).on("scrollstop", function () {
        var parentOffset = $(this).parent().offset();
        var relY = window.scrollY;
        localStorage.setItem('scrolls', relY);
        console.log(localStorage.getItem("scrolls"));
    });

});

$(document).on("pagebeforeshow", '#outerPage', function () {
    var positionY = localStorage.getItem("scrolls");
    if (positionY != null) {
        $.mobile.defaultHomeScroll = positionY;
    }
});

因此，我将值保存在localStorage中，并在更改页面时将其清除，例如单击链接标记时，我知道这不是正确的解决方案:P.我试图使用.unload()，但刷新同一页面时并没有清除LocalStorage事件

So I am saving the value in a localStorage and clearing it up when I change page like when I click on link tag I know this is not the right solution :P. I was trying to use .unload() but it was not clearing the LocalStorage event when the same page was refreshed

请帮助我解决这个问题

感谢&问候

推荐答案

在我的一个项目中，我使用此代码来记住页面上的最后滚动位置.

On one of my projects i use this code to remember the last scrolled position on a page.

演示(只需在列表上滚动，进入第2页，然后返回)

http://jsfiddle.net/ukzuvtyh/

用于保留最后一个职位的jQuery代码

var storePosition = {     /// initializing the storeposition
    topCoordinate : null
}


 storePosition.topCoordinate =  $(this).offset().top;   /// storing the position


if(storePosition.topCoordinate !== 0) {   // if we are at the top no point doing anything

 $("html, body").animate({"scrollTop":  storePosition.topCoordinate}, 500);

 }

如果您在某些页面上看到返回时的滚动，则最后一个位置偏离了一些像素，请减去或相加以获得确切的位置.之后就可以了.您需要先判断一下正确的金额. -60减去滚动条上的60像素.我遇到了这个问题，不知道为什么，所以解决了

If you see that on some pages when you go back the scroll to the last position is off by some pixels subtract or add to get the exact position. It will be ok after that. You will need to judge a little before the right amount. - 60 indigates 60 pixels minus on the scroll. I had this issue, don't know why so its a fix

$("html, body").animate({"scrollTop":  storePosition.topCoordinate - 60}, 500);

这篇关于如何为Jquery Mobile页面保存当前滚动位置的偏移量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！