为了防止性能问题，“滚动链接定位效果”的替代方案是什么？

Question

为了防止性能问题，“滚动链接定位效果”的替代方案是什么？

我在 Firefox 中收到以下警告

该网站似乎使用了滚动链接定位效果。这可能不适用于异步平移；请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects了解更多详细信息并加入有关相关工具和功能的讨论！

我使用的片段是

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    $('#share-bar').hide('slow');
  }
  else {
    $('#share-bar').show('slow');
  }
});

Run Code Online (Sandbox Code Playgroud)

我该如何解决这个问题？

Answer 1

小智 6

我在这里对 javascript/jquery 有同样的问题].onscroll()然后显示返回顶部按钮。

我用“开关布尔值”和计时器解决了这个问题：

（我有几种解决方案，但似乎这个是最好的）

使用 ftm 许可证（免费向人类许可证：向仍在编程的任何人展示此脚本）：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="Constantin">
  <title>on scroll 2019</title>
 </head>
 <body>

 <!-- the complete asyncron solution to manage "This site appears to use a scroll-linked positioning effect",the console error you see from the browsers -->
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
  $(document).ready(function(){
    var sw=true;
    $(window).scroll(function () {
        if(sw){
            sw=false;
            setTimeout(function(){

            if ($(this).scrollTop() != 0) {
                $('#gotop').show();
                sw=true;
            } else {
                $('#gotop').hide();
                sw=true;
            }

            }, 200);
        }
    });
$('#gotop').click(function(){
        //$("html, body").animate({ scrollTop: 0 }, 100);
        window.scrollTo(0,0);
        return false;
    });
});//on ready

  </script>


<style type="text/css">
    #gotop {
        position: fixed;
        bottom: 10px;
        right: 10px;
        cursor: pointer;
        display: none;
    }
</style>
  <div id="gotop">GO TO TOP</div>
bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>


 </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，3 月前
查看次数：	6988 次
最近记录：	5 年，2 月前