Question

您可以在

上看到我的演示代码。

https://codepen.io/Nyarl/pen/EORXMe

$(window).on('load resize scroll', function() {
        var activeFound = false;
        $('article').each(function() {
            if (!activeFound) {
                if ($(this).is( ':in-viewport( 5 )')) {
                    $("article.current-new").removeClass("current-new");
                    $(this).addClass('current-new');
                    var url = $(this).data('url');
                    var title = $(this).data('page-title');
                    document.title = title;
                    history.pushState('data to be passed', title, url);
                    console.log(url);
                    activeFound = true;
                }
            }

        });
    });

article {
      max-width:500px;
      min-height:500px
    }
    article.current-new {
      background:red;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>
<article data-url="https://stackoverflow/1" data-title="test">
      <p>
        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente aliquam suscipit dolore non consequatur saepe provident vel molestias sequi, accusamus nemo consequuntur nisi ducimus aperiam illum cum expedita cumque tempora?</span>
    
      </p>
    </article>

我正在为我的博客开发无限滚动功能。我可以根据具有.current new类的元素来更改元设置。

问题是当我尝试更改url时，我的代码执行了多次。因此，用户必须多次点击浏览器的上一个按钮才能访问其他帖子。

我正在从ajax调用中调用那些文章元素。

编辑：未指定脚本src：

Answer 1

您可以使用以下方法阻止pushState向历史添加url多次：

if(!history.state || history.state.url != '/yourUrl'){
    // then push state
}

通过history.state，我们将检查是否设置了历史记录，如果是，则需要确保此状态不等于pushState url。...

注意：pushState最像这样：

history.pushState({ url: "/yourUrl" }, title, url);

更改浏览器网址

1 个答案: