使用浏览器检测IE和Safari关闭Stellar.js
使用浏览器检测IE和Safari关闭Stellar.js
提问于 2017-07-07 17:26:40
我还在学习jQuery，我正在试图找出为什么这个脚本不起作用。
目标是关闭移动Stellar.js视差，这是我通过检测特定的CSS类来完成的。我还试图在Safari和IE上关闭它，因为当使用鼠标轮滚动时，它的性能很不稳定。任何帮助疑难解答，因为我知道代码是同步有效的，将是很棒的。
(它封装在“jQuery(文档).ready(函数($)”中，以便在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,
});
});
}
}
}); 回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-07 19:02:07
这就解决了它。结果，我不得不在第一个函数中这样做，我需要调用屏幕大小检查中的变量。我希望这对其他人有帮助！
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,
});
});
}
}
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44976579
复制相关文章
相似问题
腾讯云开发者
