为什么此“显示/隐藏切换”功能在Safari中不起作用？

Question

我一直在尝试对似乎无法在Safari上正常运行的显示/隐藏切换脚本进行故障排除...虽然，由于某些原因，它在Chrome和Firefox上无法正常运行，但根本无法显示切换效果苹果浏览器。 关于为什么会发生任何建议？

这是一个演示我正在使用的功能的代码段：

 $(document).ready(function() { var $window = $(window); var div2 = $('#pgnav'); var div1 = $('#container2'); $window.on('scroll', function() { var scrollTop = document.documentElement.scrollTop; var viewport_height = $window.height(); var scrollTop_bottom = scrollTop + viewport_height; var window_top_to_div2 = ($window.height() - div2.height()) / 2; var div1_top = div1.offset().top; var div1_height = div1.height(); var div1_bottom = div1_top + div1_height; div2.toggleClass('show', scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)); }); }); 

 #pgnav { height: 50px; text-align: center; margin: auto; top: 0; bottom: 0; right: 50%; left: 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity 500ms, visibility 500ms; -o-transition: opacity 500ms, visibility 500ms; transition: opacity 500ms, visibility 500ms; z-index: 1; position: fixed; max-width: 1000px; width: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #pgnav.show { visibility: visible; opacity: 1; } #pgnav .wrap { position: relative; height: 50px; width: 80%; margin: 0 auto; } #pgnav .navbtns, #pgnav-min .navbtns { display: table-cell; width: 50px; height: 50px; position: absolute; top: 0; background: transparent; } #pgnav .navbtns svg, #pgnav-min .navbtns svg { fill: blue; opacity: .8; overflow: visible; will-change: opacity; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #pgnav .navbtns svg:hover, #pgnav-min .navbtns svg:hover { opacity: 1; } #pgnav .prev { right: 0; margin-right: -25px; } #pgnav .next { left: 0; margin-left: -25px; } #container1, #container3 { width: 60%; height: 1000px; background: yellow; margin: 0 auto; display: block; text-align: center; } #container2 { width: 60%; height: 2000px; margin: 0 auto; position: relative; background: blue; display: block; text-align: center; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pgnav"> <div class="wrap"> <a href="#" class="navbtns prev" title="Go to Next Page"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,0,0,25,25,25,0,0,0,25,50ZM25,2A23,23,0,1,1,2,25,23,23,0,0,1,25,2Zm-3,9V39L32,25Z" style="fill-rule:evenodd"/></svg> </a> <a href="#" class="navbtns next" title="Go to Previous Page"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,1,50,25,25,25,0,0,1,25,50ZM25,2A23,23,0,1,0,48,25,23,23,0,0,0,25,2Zm3,9V39L18,25Z" style="fill-rule:evenodd"/></svg> </a> </div> </div> <div id="container1"> Scroll down to <b>#container2</b> </div> <div id="container2"> This is <b>#container2</b> </div> <div id="container3"> Scroll up to <b>#container2</b> </div> 

Answer 1

您是否尝试过更新版本的JQuery？ 我没有下载safari，但我将jquery 3.3.1放在了代码片段中，并且可以在Firefox上使用。 让我知道这个是否奏效！

 $(document).ready(function() { var $window = $(window); var div2 = $('#pgnav'); var div1 = $('#container2'); $window.on('scroll', function() { var scrollTop = document.documentElement.scrollTop; var viewport_height = $window.height(); var scrollTop_bottom = scrollTop + viewport_height; var window_top_to_div2 = ($window.height() - div2.height()) / 2; var div1_top = div1.offset().top; var div1_height = div1.height(); var div1_bottom = div1_top + div1_height; div2.toggleClass('show', scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)); }); }); 

 #pgnav { height: 50px; text-align: center; margin: auto; top: 0; bottom: 0; right: 50%; left: 50%; display: none; opacity: 0; -webkit-transition: opacity 500ms, visibility 500ms; -o-transition: opacity 500ms, visibility 500ms; transition: opacity 500ms, visibility 500ms; z-index: 1; position: fixed; max-width: 1000px; width: 100%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #pgnav.show { display: inline; opacity: 1; } #pgnav .wrap { position: relative; height: 50px; width: 80%; margin: 0 auto; } #pgnav .navbtns, #pgnav-min .navbtns { display: table-cell; width: 50px; height: 50px; position: absolute; top: 0; background: transparent; } #pgnav .navbtns svg, #pgnav-min .navbtns svg { fill: blue; opacity: .8; overflow: visible; will-change: opacity; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #pgnav .navbtns svg:hover, #pgnav-min .navbtns svg:hover { opacity: 1; } #pgnav .prev { right: 0; margin-right: -25px; } #pgnav .next { left: 0; margin-left: -25px; } #container1, #container3 { width: 60%; height: 1000px; background: yellow; margin: 0 auto; display: block; text-align: center; } #container2 { width: 60%; height: 2000px; margin: 0 auto; position: relative; background: blue; display: block; text-align: center; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pgnav"> <div class="wrap"> <a href="#" class="navbtns prev" title="Go to Next Page"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,0,0,25,25,25,0,0,0,25,50ZM25,2A23,23,0,1,1,2,25,23,23,0,0,1,25,2Zm-3,9V39L32,25Z" style="fill-rule:evenodd"/></svg> </a> <a href="#" class="navbtns next" title="Go to Previous Page"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M25,50A25,25,0,1,1,50,25,25,25,0,0,1,25,50ZM25,2A23,23,0,1,0,48,25,23,23,0,0,0,25,2Zm3,9V39L18,25Z" style="fill-rule:evenodd"/></svg> </a> </div> </div> <div id="container1"> Scroll down to <b>#container2</b> </div> <div id="container2"> This is <b>#container2</b> </div> <div id="container3"> Scroll up to <b>#container2</b> </div> 

Answer 2

已解决，在这里回答： https : //stackoverflow.com/a/51005505/9214076 。 document.documentElement.scrollTop有一个问题。 通过用$(window).scrollTop()替换它，脚本现在可以跨浏览器顺利运行。