if/else 语句在 Safari 中不起作用?(JQuery) [英] if/else Statement Not Working in Safari? (JQuery)

查看：33
本文介绍了if/else 语句在 Safari 中不起作用?(JQuery)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我应用了一个 if/else 语句(在一个更大的函数中)，它在 Safari 浏览器中似乎根本无法处理..addClass() 和 .removeClass() 操作在提示时甚至不适用.

这是所引用的 if/else 语句以及相应的 CSS 的简短示例:

$(document).ready(function() {var $window = $(window);var div2 = $('#toggle-element');var div1 = $('#container');$window.on('scroll', function() {if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {div2.addClass('show');} 别的 {div2.removeClass('show');}});});

#toggle-element {高度:50px；文本对齐:居中；保证金:自动；顶部:0；底部:0；正确:50%；左:50%；可见性:隐藏；不透明度:0；-webkit-transition:不透明度500ms，可见度500ms；-o-transition:不透明度500ms，可见度500ms；过渡:不透明度 500 毫秒，可见度 500 毫秒；z-索引:1；位置:固定；最大宽度:1000px；宽度:100%；-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);变换:translateX(-50%);}#toggle-element.show {可见性:可见；不透明度:1；}#容器 {宽度:60%；高度:2000px；边距:0 自动；位置:相对；背景:蓝色；显示:块；文本对齐:居中；颜色:#fff;}

更新:这是利用上述示例的完整片段:

$(document).ready(function() {var $window = $(window);var div2 = $('#toggle-element');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');} 别的 {div2.removeClass('show');}});});

#toggle-element {高度:50px；文本对齐:居中；保证金:自动；顶部:0；底部:0；正确:50%；左:50%；可见性:隐藏；不透明度:0；-webkit-transition:不透明度500ms，可见度500ms；-o-transition:不透明度500ms，可见度500ms；过渡:不透明度 500 毫秒，可见度 500 毫秒；z-索引:1；位置:固定；最大宽度:1000px；宽度:100%；-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);变换:translateX(-50%);}#toggle-element.show {可见性:可见；不透明度:1；}#toggle-element .wrap {位置:相对；高度:50px；宽度:80%；边距:0 自动；}#toggle-element .navbtns {显示:表格单元格；宽度:50px；高度:50px；位置:绝对；顶部:0；背景:透明；}#toggle-element .navbtns svg {填充:蓝色；不透明度:0.8；溢出:可见；will-change:不透明度；-webkit-transition:所有 0.5 秒轻松；-o-transition:所有 0.5 秒的缓和；过渡:全0.5s缓动；}#toggle-element .navbtns svg:hover {不透明度:1；}#toggle-element .prev {右:0；边距右:-25px；}#toggle-element .next {左:0；左边距:-25px；}#容器1，#container3 {宽度:60%；高度:1000px；背景:黄色；边距:0 自动；显示:块；文本对齐:居中；}#container2 {宽度:60%；高度:2000px；边距:0 自动；位置:相对；背景:蓝色；显示:块；文本对齐:居中；颜色:#fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="切换元素"><div class="wrap"><a href="#" class="navbtns prev" title="转到下一页"><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="转到上一页"><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" 样式="fill-rule:evenodd"/></svg></a>

<div id="container1">向下滚动到 <b>#container2</b>

<div id="container2">这是<b>#container2</b>

<div id="container3">向上滚动到 <b>#container2</b>

解决方案

感谢 MikaelLennholm 的推荐，问题现已解决！

问题似乎在于document.documentElement.scrollTop.通过将其替换为 $(window).scrollTop()，脚本现在可以跨浏览器流畅运行.

这是工作脚本的一个片段，正在运行:

$(document).ready(function() {var $window = $(window);var div2 = $('#toggle-element');var div1 = $('#container2');$window.on('scroll', function() {var scrollTop = $(window).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');} 别的 {div2.removeClass('show');}});});

#toggle-element {高度:50px；文本对齐:居中；保证金:自动；顶部:0；底部:0；正确:50%；左:50%；可见性:隐藏；不透明度:0；-webkit-transition:不透明度500ms，可见度500ms；-o-transition:不透明度500ms，可见度500ms；过渡:不透明度 500 毫秒，可见度 500 毫秒；z-索引:1；位置:固定；最大宽度:1000px；宽度:100%；-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);变换:translateX(-50%);}#toggle-element.show {可见性:可见；不透明度:1；}#toggle-element .wrap {位置:相对；高度:50px；宽度:80%；边距:0 自动；}#toggle-element .navbtns {显示:表格单元格；宽度:50px；高度:50px；位置:绝对；顶部:0；背景:透明；}#toggle-element .navbtns svg {填充:蓝色；不透明度:0.8；溢出:可见；will-change:不透明度；-webkit-transition:所有 0.5 秒轻松；-o-transition:所有 0.5 秒的缓和；过渡:全0.5s缓动；}#toggle-element .navbtns svg:hover {不透明度:1；}#toggle-element .prev {右:0；边距右:-25px；}#toggle-element .next {左:0；左边距:-25px；}#容器1，#container3 {宽度:60%；高度:1000px；背景:黄色；边距:0 自动；显示:块；文本对齐:居中；}#container2 {宽度:60%；高度:2000px；边距:0 自动；位置:相对；背景:蓝色；显示:块；文本对齐:居中；颜色:#fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="切换元素"><div class="wrap"><a href="#" class="navbtns prev" title="转到下一页"><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="转到上一页"><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" 样式="fill-rule:evenodd"/></svg></a>

<div id="container1">向下滚动到 <b>#container2</b>

<div id="container2">这是<b>#container2</b>

<div id="container3">向上滚动到 <b>#container2</b>

I have applied an if/else statement, (within a larger function), that does not seem to process at all in the Safari browser. The .addClass() and .removeClass() actions do not even apply when prompted.

This is a brief example of the if/else statement referenced, along with the according CSS:

$(document).ready(function() {
  var $window = $(window);
  var div2 = $('#toggle-element');
  var div1 = $('#container');
  $window.on('scroll', function() {
    if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {
      div2.addClass('show');
    } else {
      div2.removeClass('show');
    }
  });
});

#toggle-element {
  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%);
}

#toggle-element.show {
  visibility: visible;
  opacity: 1;
}

#container {
  width: 60%;
  height: 2000px;
  margin: 0 auto;
  position: relative;
  background: blue;
  display: block;
  text-align: center;
  color: #fff;
}

UPDATE: Here is a full snippet utilizing the example above:

$(document).ready(function() {
  var $window = $(window);
  var div2 = $('#toggle-element');
  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');
    }
  });
});

#toggle-element {
  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%);
}

#toggle-element.show {
  visibility: visible;
  opacity: 1;
}

#toggle-element .wrap {
  position: relative;
  height: 50px;
  width: 80%;
  margin: 0 auto;
}

#toggle-element .navbtns {
  display: table-cell;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  background: transparent;
}

#toggle-element .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;
}

#toggle-element .navbtns svg:hover {
  opacity: 1;
}

#toggle-element .prev {
  right: 0;
  margin-right: -25px;
}

#toggle-element .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="toggle-element">
  <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>

解决方案

Thanks to MikaelLennholm's recommendation, the issue has now been resolved!

The complication seemed to be with document.documentElement.scrollTop. By replacing it with $(window).scrollTop(), the script now runs smoothly cross-browser.

Here is a snippet of the working script, in action:

$(document).ready(function() {
  var $window = $(window);
  var div2 = $('#toggle-element');
  var div1 = $('#container2');
  $window.on('scroll', function() {
    var scrollTop = $(window).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');
    }
  });
});

#toggle-element {
  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%);
}

#toggle-element.show {
  visibility: visible;
  opacity: 1;
}

#toggle-element .wrap {
  position: relative;
  height: 50px;
  width: 80%;
  margin: 0 auto;
}

#toggle-element .navbtns {
  display: table-cell;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  background: transparent;
}

#toggle-element .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;
}

#toggle-element .navbtns svg:hover {
  opacity: 1;
}

#toggle-element .prev {
  right: 0;
  margin-right: -25px;
}

#toggle-element .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="toggle-element">
  <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>

这篇关于if/else 语句在 Safari 中不起作用?(JQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆