滚动链接定位效果的替代方案是什么?防止性能问题? [英] What is the alternative to "scroll-linked positioning effect" to prevent performance issues?
问题描述
我在Firefox中收到以下警告
I get the following warning in firefox
此站点似乎使用滚动链接的定位效果.这可能不适用于异步平移.请参见 https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects了解更多详细信息，并加入有关工具和功能的讨论！
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
我使用的代码段是
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$('#share-bar').hide('slow');
}
else {
$('#share-bar').show('slow');
}
});
我该如何解决?
推荐答案
对于javascript/jquery，我在这里有同样的问题..onscroll()，然后显示返回页首按钮.
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)
具有ftm许可证(对人类免费的许可证:向仍在编程的任何人显示此脚本):
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>
这篇关于滚动链接定位效果的替代方案是什么?防止性能问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
