使用 IE 和 Safari 的浏览器检测关闭 Stellar.js

Question

我仍在学习 jQuery，我正在尝试找出此脚本无法正常工作的原因。

目标是关闭移动设备的 Stellar.js 视差，我通过检测特定的 CSS class 来完成。我还试图在 Safari 和 IE 上将其关闭，因为使用鼠标滚轮滚动时性能不稳定。任何帮助故障排除，因为我知道代码在语法上是有效的，都会很棒。

（它包含在 "jQuery(document).ready(function($)" 中以在 WordPress 中正常运行。）

 jQuery(document).ready(function($) {   
   $(document).ready(function() {
   // run test on initial page load
   checkSize();

   // run test on resize of the window
   $(window).resize(checkSize);
   });

   //Function to the css rule
   function checkSize(){
   if ($(".parallax").css("background-attachment") == "inherit" ){
      $(function () {
      $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
     });
   });
   }
   if ($(".parallax").css("background-attachment") == "fixed" ){
      $(function () {
      $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
      });
   });
   } 
   }

   // Opera 8.0+
   var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

   // Firefox 1.0+
   var isFirefox = typeof InstallTrigger !== 'undefined';

   // Safari 3.0+ "[object HTMLElementConstructor]" 
   var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

   // Internet Explorer 6-11
   var isIE = /*@cc_on!@*/false || !!document.documentMode;

   // Edge 20+
   var isEdge = !isIE && !!window.StyleMedia;

   // Chrome 1+
   var isChrome = !!window.chrome && !!window.chrome.webstore;

   // Blink engine detection
   var isBlink = (isChrome || isOpera) && !!window.CSS;

   // check if Safari or IE and disable parallax
   if(!isSafari || !isIE)
   {
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
       });
    }

});

更新： 我清理了这个，但现在我在检查 isFirefox、isChrome 等未定义时遇到错误。那是因为我错误地调用了变量吗？

jQuery(document).ready(function($) {    
   $(document).ready(function() {

   // hella browser checks  
   // Opera 8.0+
   var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

   // Firefox 1.0+
   var isFirefox = typeof InstallTrigger !== 'undefined';

   // Safari 3.0+ "[object HTMLElementConstructor]" 
   var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

   // Internet Explorer 6-11
   var isIE = /*@cc_on!@*/false || !!document.documentMode;

   // Edge 20+
   var isEdge = !isIE && !!window.StyleMedia;

   // Chrome 1+
   var isChrome = !!window.chrome && !!window.chrome.webstore;

   // Blink engine detection
   var isBlink = (isChrome || isOpera) && !!window.CSS;

   // run test on initial page load
   checkSize();

   // run test on resize of the window
   $(window).resize(checkSize);
});

   //Function to the css rule
   function checkSize(){
     if ($(".parallax").css("background-attachment") == "inherit" ){
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
       });
     });
    }
    if ( ($(".parallax").css("background-attachment") == "fixed" ) && (!isFirefox || !isChrome || !isBlink || !isOpera) ) {
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
       });
    });
   } 
   } 
});

Answer 1

这就解决了。原来我必须在第一个函数中完成它，我需要在屏幕尺寸检查中调用变量。我希望这对其他人有帮助！

jQuery(document).ready(function($) {    
$(document).ready(function() {

// run test on initial page load
checkSize();

// run test on resize of the window
$(window).resize(checkSize);
});

// hella browser checks  
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

//Function to the css rule
function checkSize(){
if ($(".parallax").css("background-attachment") == "inherit" ){
    $(function () {
    $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
    });
});
}
if ( ($(".parallax").css("background-attachment") == "fixed" ) && (isFirefox || isChrome || isBlink || isOpera) ) {
    $(function () {
    $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
    });
});
} 
} 
});

使用 IE 和 Safari 的浏览器检测关闭 Stellar.js

Turning off Stellar.js on by using browser detection for IE and Safari

javascript

jquery

parallax

browser-detection