前端兼容火狐浏览器滚动条

2024-09-05

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

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

css--两行显示省略号兼容火狐浏览器

css--两行显示省略号兼容火狐浏览器正常写法: .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .ellipse2{;} 总结下来就是:固定的宽度,强制不换行,超出隐藏,显示省略号.四个属性但是在火狐下不兼容: 兼容做法: p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;} p::after{

兼容火狐浏览器的select下拉框样式

经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是! 好东西来了,现在能调成跟谷歌一样的样式,只需要设置兼容火狐的样式即可: <link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> <s

FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

问题一:最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox(火狐)不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了,标准的是pointer 问题二:FireFox(火狐)不支持滤镜最常见的半透明不支持. filter: Alpha(Opacity=50); /* for IE */ opacity: .5;/* for Firefox */ style="-moz-opacity:0.5; filter:alpha(opacit

关于使用easyui为前端框架，加载表格数据较多时在火狐浏览器会出现表格片段不停闪烁问题的兼容问题解决。

1.项目是可视化管理系统,加载的数据较多,使用谷歌浏览器从登陆界面跳转到主页时还算干净利落,但是使用火狐浏览器时在这一过程中在数据没有加载完毕之前,整个页面就仿佛是在闪烁,可以看到闪烁的是表格字段的片段,这对于用户体验而言并不友善,所以我就开始百度到底是什么原因.最终留意到一个大神写的博客,具体什么记不清楚了,但是大致的问题和我描述的差不多,于是采纳了他的解决办法: 思路:在页面加载之前也就是由登陆界面跳到首页这个过程之间,在首页内容还未完全加载出来之前用一个纯白色背景的盒子将其盖住,这样也就不

HTML5前端性能优化——浏览器兼容与前端性能优化

一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

a标签前端下载火狐兼容和笔记

1.a标签实现前端下载的谷歌兼容我们都知道,文件下载的一种实现方案就是后端返回文件流,然后前端进行生成a标签并触发点击来下载.但是在火狐浏览器的时候,需要注意一些兼容性问题.原因是火狐的同源策略.官方说明:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes 代码如下: download(row) { downloadFile({ id: row.fileId }).then(res => { // win

网页制作常见的问题（怎样兼容IE6/IE7/火狐浏览器）

1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG 例如: <style type="text/css"> body {margin:0} div { float:left; margin-left:10px; width:300px; height:300px; border:1px solid red; } </style> 因为加上浮动后就会多出一倍的边距,浮动

网页制作常见的面试题（怎样兼容IE6/IE7/火狐浏览器）

1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG例如:<style type="text/css">body {margin:0}div { float:left; margin-left:10px; width:300px; height:300px; border:1px solid red; }</style>因为加上浮动后就会多出一倍的边距,浮动后本来外边距

自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性.便百之谷之后,发现原来不仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的.下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正:若有更好的方案,你可以留言,让大家都开开眼界...... 自定义IE浏

html5调用本机摄像头兼容谷歌浏览器高版本,谷歌浏览器低版本,火狐浏览器

做这个功能的时候在网上查了一些资料,代码如下,在这个代码在谷歌浏览器46版本是没问题的,在火狐浏览器也行,但是在谷歌浏览器高版本下是不兼容的 <div id="body"> <section class="featured"> <div class="content-wrapper"> <hgroup class="title"> <h1>Welcome to web

javascript获取滚动条位置（兼容所有浏览器）

有两种方式来获取浏览器滚动条的位置第一种:document.documentElement.scrollTop 第二种:$("body").scrollTop() 第一种方式能够兼容FireFox和IE,但是chrome下取的值永远是0,而第二种能够兼容Chrome,但在IE和FireFox下取的值永远是0 所以最准确取位置的方法是: if($.browser.webkit) { scTop = $("body").scrollTop(); }else { scT

CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; /*滚动条的背景区域的圆角*/ background-col

【web前端开发】浏览器兼容性处理

1.居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的最后,

转：【web前端开发】浏览器兼容性处理大全

解决思路: ①.写代码的时候遵循W3C标准,按照最新稳定版本的IE或WebKit内核浏览器进行编码 ②.遇到部分无法全面解决浏览器兼容的时候,采取CSS的hack手段进行针对性微调.简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器. ③.遇到特别难解决的,可以用JS强制修改. 1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div

无障碍阅读：页面缩放兼容性处理（zoom,Firefox火狐浏览器）

1.无障碍阅读使用场景无障碍阅读一般在政府类网站使用比较多,如: 天津海事局(http://www.tjmsa.gov.cn/),其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug,不起作用. 中国海事局(http://www.msa.gov.cn/): 无障碍阅读一般包括以下功能: 1.1 页面放大 1.2 页面缩小 1.3 文字放大(页面所有文字字号逐渐变大) 1.4 文字缩小(页面所有文字字号逐渐变小) 1.5 开启对比度(页面所有背景变黑,文字变白) 以上功能中,最主

【jQuery学习】写一个简单的弹框页面，火狐浏览器有弹框，但IE8没有弹框的原因？

我也是刚学习jQuery,就从官网上下载了jQuery的包,版本是3.2.1 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="script/jquery-3.2.1.js"></s

【web前端开发】浏览器兼容性处理大全

1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的

兼容火狐，Chrome,IE6，IE7，IE8的HTML换行写法

本文链接:https://java-er.com/blog/html-break-line-firefox-chrome/ 兼容火狐,Chrome,IE6,IE7,IE8的HTML换行写法1.任意数据自动强制换行 <div id=”ff” style=”border: 1px solid #f00; width: 300px; word-wrap: break-word;”>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖经过一段事件才执行某个操作,如果时间内又执行了该操作则延长时间重新开始计算 /* 不做处理input触发keyup事件 */ /* 输入快的话会出现输出结果多次重复 */ window.onload = function () { let obj = document.getElementById('input') obj.ad

前端兼容火狐浏览器滚动条

热门专题