jquery 如何捕获div的位置，以便在页面重载时可以获得该位置

lrpiutwd 于 2023-02-03 发布在 jQuery

关注(0)|答案(5)|浏览(110)

我想捕获滚动捕获区域的位置，如下图所示

以便在页面重新加载任何其他方案时保留状态。

$(function(){

   setInterval(function(){
      window.location.reload();
   },90000);
  
});

.container{
  width:600px;
  height:300px;
 // background:red;
  overflow-y:auto;
  font-size:18px;
  line-height: 40px;
  padding-left: 14px;
  position: relative;
}

.center-band{
    position: fixed;
    z-index: 40;
    width: 100%;
    height: 70px;
    background: #0000003b;
    top: 50%;
    transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci sequi omnis officia, tempore nesciunt distinctio in inventore quia voluptate ducimus eius natus ex. Facilis excepturi distinctio sunt placeat deleniti error.
  
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum iste architecto dolores tempora officia vero, repellendus ab voluptas, eveniet dolore, cumque aliquam cum quas facilis aspernatur molestias perferendis eum nesciunt!
  
  
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi fugiat impedit quam, sit, sapiente, provident praesentium beatae non nostrum optio repellendus porro laboriosam quidem ipsa itaque? Voluptatem quam pariatur dolorem.
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, quisquam similique distinctio, perferendis accusantium quidem voluptatum architecto nulla ad adipisci provident possimus voluptatem ut animi aliquid quo hic ab. Assumenda?
  
  
  
  
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga, sit corporis. Vitae facilis nesciunt alias consectetur rem, exercitationem, est possimus, beatae architecto suscipit expedita provident culpa. At eum sequi omnis
  
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum quaerat numquam ex vero, neque aliquid totam, explicabo error suscipit eius. Earum beatae voluptatum cupiditate iusto saepe quidem deserunt magnam?
  
  
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi possimus excepturi dolores quasi, qui libero quia amet, ab facere quis nulla voluptatem, sunt necessitatibus! Animi voluptates quam minus odio excepturi!
  
  <div class="center-band"></div>
</div>

- 以下是我的代码：**

https://codepen.io/eabangalore/pen/jeKQwd/

- 问题：**我正在尝试捕获波段区域的position，以便在页面重新加载时文本相同

请帮帮我，先谢了

jquery

来源：https://stackoverflow.com/questions/52912133/how-to-capture-position-of-a-div-so-that-on-page-reload-i-can-have-that-position

5条答案

按热度按时间

0qx6xfy61#

use:

https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset以获得位置。
https://developer.mozilla.org/it/docs/Web/API/Window/localStorage保存和检索位置
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo以滚动

古老迷人的方式

作为一个文档，最好创建一个由节和标题组成的文档结构。每个节都可能有一个ID。因此，您可以使用锚点创建指向特定页面节的URL。您也可以使用锚点创建一个内部导航。查看更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

<a href="#my-section-1">My section 1</a>
<a href="#my-section-2">My section 2</a>
<section id="my-section-1">
  <h2>My section 1</h2>
  <p>Lorem ipsum ...<p>
</section>
<section id="my-section-2">
  <h2>My section 2</h2>
  <p>Lorem ipsum ...<p>
</section>

赞(0）回复(0）举报 2023-02-03

ldioqlga2#

您正在.container元素上滚动，而div.center-band的位置是固定的。
要存储信息，您可以使用localStorage、cookies、URL hashes or params;或者甚至是history。

本地存储

它将保留信息，直到您关闭浏览器。
在此片段中：https://jsfiddle.net/gatsbimantico/1tzaq5g2/我正在使用本地存储。

$(function() {
  var store = window.localStorage;
  var featureKey = 'container.scrollTop';

  function recoverScroll() {
    var scroll = store.getItem(featureKey);
    $('.container').scrollTop(parseInt(scroll, 10));
  }

  function saveScroll() {
    var scroll = $('.container').scrollTop();
    store.setItem(featureKey, scroll.toString());
  }

  if (!!store) {
    recoverScroll();
     $('.container').on('scroll', saveScroll);
   }  

});

赞(0）回复(0）举报 2023-02-03

mutmk8jj3#

您可以通过使用localStorage和jquery scroll函数来实现这一点，如下所示：

$(function(){
    let heightOffset =localStorage.getItem("heightOffset");
    $('.container').scrollTop(heightOffset);

    setInterval(function(){
        heightOffset = $('.container').scrollTop();
        localStorage.setItem("heightOffset", heightOffset);

        window.location.reload();
    },90000);
});

这里在加载localStorage.setItem("heightOffset", heightOffset)之前设置先前的滚动偏移位置，进一步在重新加载时您可以从localStorage.getItem("heightOffset")获得初始偏移位置，并将滚动精确地保持在该位置。
Here可以查看工作示例。

赞(0）回复(0）举报 2023-02-03

bjp0bcyl4#

我怀疑你想将滚动位置返回到用户离开时的位置。这将不使用固定位置，而是捕获当前滚动位置。
请看下面的例子：https://jsfiddle.net/Twisty/0u9rdym7/14/

- 脚本语言**

$(function() {
  function recordScroll(val) {
    var pos = 0;
    if (typeof val !== undefined) {
      pos = val;
    }
    console.log("Save", pos);
    localStorage.setItem('scrollVal', val);
  }

  function getScroll() {
    var pos = localStorage.getItem('scrollVal') || 0;
    pos = parseInt(pos);
    console.log("Get", pos);
    return pos;
  }

  function returnToPos($t, val) {
    var pos = 0;
    if (typeof val === 'undefined') {
      pos = getScroll();
    } else {
      pos = val;
    }
    pos = parseInt(pos);
    console.log("Return", pos);
    $t.scrollTop(pos);
  }

  $(".container").scroll(function(e) {
    var pos = $(this).scrollTop();
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      recordScroll(pos);
      console.log("Haven't scrolled in 250ms!");
    }, 250));
  });
  returnToPos($(".container"));
  recordScroll($(".container").scrollTop());
});

您需要记录当前位置，获取位置，然后将容器返回到该位置。正如建议的那样，由于页面将重新加载，localStorage或cookies是一个很好的方法。在Scroll操作期间，我们需要知道滚动何时停止，我们还需要知道scrollTop的值。
当滚动停止时，我们可以将值保存到localStorage中，当重载发生时，页面将收集存储的值并将滚动返回到那个位置。
希望能有所帮助。

赞(0）回复(0）举报 2023-02-03

blmhpbnm5#

- 简单的解决方案**

将onscroll事件附加到div。

function setScroll(){
    document.getElementById("myDiv").scrollTop = localStorage.getItem('scrollTO')||0;
}

<body onload="setScroll()">

<div id="myDiv"  onscroll="localStorage.setItem('scrollTO',this.scrollTop)">

<!-- your text goes here-->

</div>
</body>

当您滚动时，scrollTop保存到localStorage，当您重新加载页面时，可以从localStorage读取它，并将页面滚动到用户离开的位置。

赞(0）回复(0）举报 2023-02-03

我来回答

jquery 如何捕获div的位置，以便在页面重载时可以获得该位置

5条答案

古老迷人的方式

本地存储

相关问题

热门标签

最新问答