JavaScript判断浏览器和hack滚动条的写法

判断各大浏览器内核：

var userAgent = navigator.userAgent;                              //取得浏览器的userAgent字符串
  var isOpera = userAgent.indexOf("Opera") > -1;                         //判断是否Opera浏览器
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;                     //判断是否IE的Edge
  var?isFF?=?userAgent.indexOf("Firefox")>-1                           //判断是否Firefox浏览器??
  var?isSafari?=?userAgent.indexOf("Safari")>-1&&?userAgent.indexOf("Chrome")==-1;        //判断是否Safari浏览器??
  var?isChrome?=?userAgent.indexOf("Chrome")>-1&&?userAgent.indexOf("Edge")==-1;         //判断Chrome浏览器?？

处理各个浏览器滚动条，以下是我隐藏公司项目中滚动条的写法，仅供参考：

if(isFF){
    console.log('火狐')
    $('#parent').width((windowWidth -320)*(1.01749));
  }else if(isChrome){
    console.log('谷歌')
    $('#parent').width((windowWidth -320)*(1.01749));
  }else if(isIE){
    console.log('ie10-ie5')
    $('#parent').width((windowWidth -320)*(1.01720));
  }else if(isEdge){
    console.log('edge')
    $('#parent').width((windowWidth -320)*(1.02224));
  }else{
    console.log('ie11和其他浏览器')
    $('#parent').width((windowWidth -320)*(1.01816));
  }

以上所述是小编给大家介绍的JavaScript判断浏览器和hack滚动条的写法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色.所以只能是通过JavaScript来实现了.也有插件可以做到.我分享一下我自己使用原生JavaScript实现的思路.先上个图看下效果: JavaScript实现的思路就是模拟浏览器自身滚动条.我制作的思路是先将整个文档放在一

  • js浏览器滚动条卷去的高度scrolltop(实例讲解)

    1.之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是"只读"的属性-> 只能通过属性获取值,不能通过属性修改元素的样式 2.scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一"可读写"的属性) box.scrollTop = 0 // 直接回到容器的顶部 我们的scrollTop的值是存在边界值(最大和最小值),我们设置的值比最小值小或者比最大值大都没用,起到

  • 原生js仿浏览器滚动条效果

    原生js仿浏览器滚动条效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿浏览器滚动条</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width: 300px;height: 500px;bord

  • 基于javascript实现浏览器滚动条快到底部时自动加载数据

    废话不多说了,直接给大家贴js代码了. <!DOCTYPE html> <html> <head> <script src="jquery-...js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var range = ; /

  • js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 复制代码 代码如下: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: 代码如下复制代码 复制代码 代码如下: document.documentElement.clientWidth document.documentElement.cli

  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*

  • JavaScript判断浏览器和hack滚动条的写法

    判断各大浏览器内核: var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") >

  • JavaScript 判断浏览器类型及版本

    几天前,浏览器家族有刚诞生了一位小王子,就是Google推出的Chrome浏览器.由于Chrome出生名门,尽管他还是个小家伙,没有人敢小看他.以后,咱们常说浏览器的"四大才子"就得改称为"五朵金花"了. 在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子.浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本. JavaScript是前端开发的主要语言,我们可以通过编写J

  • 使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)

    WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. var u = navigator.userAgent; isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS

  • JavaScript判断浏览器类型的方法

    本文实例讲述了JavaScript判断浏览器类型的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript"> var Sys = {}; var ua = navigator.userAgent.toLowerCase(); alert(ua); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1]: (s = ua.match(/firefox\/([\d.]+)/

  • 利用JavaScript判断浏览器类型及版本

    利用JavaScript判断浏览器类型及版本

    本文将介绍如何使用Javascript来检测浏览器的类型以及版本号,包括猎豹浏览器.搜狗浏览器.傲游浏览器.360极速浏览器.360安全浏览器.QQ浏览器.百度浏览器.IE,Firefox,Chrome,safari,Opera等. 效果图 实例代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

  • JavaScript 判断浏览器是否是IE

    JavaScript 判断浏览器是否是IE

    作为一个前端,避免不了会遇见IE的坑,其他浏览器都好好的,测到IE就完蛋,各种不支持,服气了 有些属性和方法是所有版本IE都不支持,而有些则是部分支持,在项目中能够,主要分界岭为IE8,我相信目前大部分在维护和开发的项目,都是支持到IE8及已上版本即可,那么这篇文章,粗浅的总结一下,如何判断浏览器是IE及版本是8.0 首先,有些属性和方法是所有版本IE都不支持,那么只需要判断是否是IE即可 以下三种是我在项目中,用到的方法,如有新的方法,会更新,若大家有其他更好的方法,还望不吝赐教~~ docu

  • JavaScript判断浏览器对CSS3属性是否支持的多种方法

    前言 CSS3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: 第一种:javascript比较常用下面这个代码: var support_css3 = (function() { var div = document.createElement

  • JavaScript判断浏览器运行环境的详细方法

    JavaScript判断浏览器运行环境的详细方法

    前言 看到标题,大家就能想起这个需求在很多项目上都能用到.我们部署在Web服务器上的前端应用,既可以用PC浏览器访问,也可以用手机浏览器访问,再加上现在智能设备的推广,我们甚至能在车载系统.穿戴设备和电视平台上访问. 设备的多样化让用户无处不在,有时候我们需要根据不同的浏览器运行环境做出对应的处理.浏览器是JavaScript的承载体,我们可以从浏览器上获取相关的信息,来进一步处理我们的业务逻辑. 然而浏览器品牌众多,有些浏览器使用的标准也不太一样,造就了难以统一的判断.下面我大概罗列一下常用的

  • JavaScript 判断浏览器是否支持SVG的代码

    可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG由W3C制定,是一个开放标准.另SVG还是Static Var Generator静止无功发生器的简称 判断浏览器是否支持SVG的代码(部分截去自Highcharts源码): Js代码: 复制代码 代码如下: function hasSVG(){ SVG_NS = 'http://www.w3.org/2000/svg', return !!doc.

  • 基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

    基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

    本文是小编总结的一些核心内容,个人感觉对大家有所帮助,具体内容请看下文: 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件. //页面关闭时,先onbeforeunload事件,

随机推荐