着迷的老路

Question

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

，以便在页面上重新加载任何其他情况时，状态得以保留。

$(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，以便在页面重新加载时我的文字保持不变

请帮助我，谢谢！

Answer 1

使用：

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>

Answer 2

您正在滚动.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);
   }  

});

Answer 3

您可以通过使用两件事localStorage和jquery滚动功能来做到这一点：

$(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，您可以查看工作示例。

Answer 4

简单的解决方案

将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中读取该内容并将页面滚动到用户离开的位置。

Answer 5

我怀疑您想将滚动位置返回到用户剩余的位置。这将不使用固定位置，而是捕获当前滚动位置。

考虑以下示例：https://jsfiddle.net/Twisty/0u9rdym7/14/

JavaScript

$(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是执行此操作的好方法。在“滚动”操作期间，我们需要知道滚动何时停止，我们还想知道scrollTop值。

停止滚动时，我们可以将值保存到localStorage。重新加载时，页面将收集存储的值，并将滚动条返回到该位置。

希望有帮助。

如何捕获div的位置，以便在页面重新加载时我可以拥有该位置

5 个答案:

着迷的老路

本地存储