Question

我的目标是保留许多图像卡（分为3行）在收集页面上的滚动位置。当某人离开页面（通过单击其中一张图像卡）然后返回到收集页面时，所单击图像的顶部必须在150px的标题下。

我的问题是：

如何将页面偏移150像素，以保持滚动在标题下？
我如何显示图像的顶部而不是我在图像块上单击的位置？假设图片的高度是400像素，我点击了350像素的高度，我想要完整要显示的图片，而不是剩余的50px。

我已经使用浏览器的localStorage存储click事件的screenY，pageY，offsetY来保留滚动位置。在页面加载时，它将pageY带到页面顶部。我没有在代码中使用screenY或offsetY。

javascript，jquery：

<script>
    $( document ).ready(function() {

        //On Click in the PLP, store position of mouse
        $('#plp').on('click', function(event) {
            const positionClick = {
                screenY: event.screenY,
                pageY: event.pageY,
                offsetY: event.offsetY
            }
            $(event.target).attr("id", "target");
            window.localStorage.setItem('positionClick', JSON.stringify(positionClick));
        });

        //On page load
        function load() {
            var position = JSON.parse(window.localStorage.getItem('positionClick'));
            var target_pageY = position.pageY;
            var target_offsetY = position.offsetY;
            window.scrollTo({top: target_pageY, behavior: 'smooth'});
        }
        window.onload = load;
    });
</script>

html结构：

<body>
<main>
  <div id="header"></div>
  <div id="plp">
    <div class="plp-list">
      <div class="plp-products">
        <span id="filter">
          <div>
            <div><a href><img /></a></div>
            <div><a href><img /></a></div>
            <div><a href><img /></a></div>
            <div><a href><img /></a></div>
            <div><a href><img /></a></div>
            <div><a href><img /></a></div>
            <div><a href><img /></a></div>
          </div>
        </span>
      </div>
    </div>
  </div>

我要寻找的行为的一个例子是在Zara的收藏网站上。如果单击任何产品然后返回，则无论单击图像的位置如何，该产品均位于页面顶部。 https://www.zara.com/ca/en/woman-new-in-l1180.html?v1=1281662

如何通过使用localStorage来存储screenY，pageY和offsetY来保持页面之间的滚动？

0 个答案: