What is the alternative to “scroll-linked positioning effect” to prevent performance issues?

后端未结

关注

 1  1685

一向

I get the following warning in firefox

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning;

相关标签:

1条回答

粉色の甜心

2021-01-16 01:12

I have the same problem here to javascript/jquery] .onscroll() then show the back to top button.

I solved this problem with a "switch boolean" and a timer:

(I had several solutions but it seems that this one is best)

With an ftm license (Free To Mankind license: show this script to anyone still programming):

<!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>

0 讨论(0)