toggleClass 可以在 Safari 中工作吗？ (jQuery)

Posted 2023-02-21

【中文标题】toggleClass 可以在 Safari 中工作吗？ (jQuery)

【英文标题】：Can toggleClass Work in Safari? (JQuery)

【发布时间】：2018-11-30 03:21:16

【问题描述】：

对于使用.toggleClass() 切换元素可见性的脚本所面临的问题，我尚未找到解决方案。下面的示例目前在 Firefox 和 Chrome 中将 .show 类与 #pgnav 相结合，但由于某种原因，该操作根本不适用于 Safari。

请查看下面的 sn-p 以获得更多参考：

$(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;
    if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) 
      div2.addClass('show')
     else 
      div2.removeClass('show');
    
  );
);

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

【问题讨论】：

已解决，在此回答：***.com/a/51005505/9214076。 document.documentElement.scrollTop 有问题。通过将其替换为$(window).scrollTop()，该脚本现在可以顺利跨浏览器运行。

【参考方案1】：

在 safari 中可见性在某些元素中不起作用，一种能够实现的方法是保存元素，修改它们并替换它们，在 jquery 中使用分离并附加替换它们。

【讨论】：

好的，谢谢您的建议。你能提供一个这样的例子吗？不然能不能修改上面的sn-p？

我已经修改了当前的sn-p，添加了.addClass()和.removeClass()的条件语句，而不是.toggleClass()。在 Safari 中仍然没有效果......不太明白为什么它仍然不起作用。

【参考方案2】：

$(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;
    if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) 
      $('#main').prepend(div2);
     else 
      $('#pgnav').detach();
      
  );
);

#pgnav 
  height: 50px;
  text-align: center;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 50%;
  left: 50%;
  visibility: visible;
  opacity: 1;
  -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="main">
<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>
</div>

【讨论】：

感谢@cherrynford 的回答，但它仍然没有在 Safari 中切换显示。您能否在最新版本的 Safari 上进行测试？