react 改变浏览器默认滚动条

2024-09-01

React之设置元素的滚动条

在React中,解耦了对DOM元素的操作,但有时我们确实需要对DOM操作,比如设置元素的滚动条,这时ref就满足了我们的需求在低版本的react中,ref可以是一个string类型的属性,通过this.refs.[refString]来获取相应的DOM元素,但在高版本的react中已被弃用在高版本中的ref可以是React.createRef()创建ref属性 ,也可以是回调函数,我们可以在构造函数中使用React.createRef()来创建一个ref属性例如: this.testR

CSS改变浏览器默认滚动条样式

前言最近总是看到某网站滚动条不是浏览器默认样式,而是自定义样式比如我博客的滚动条,自定义滚动条样式和hover前后的效果顿时来了兴致和有一个疑问,这是怎么实现的呢? 解决注:经测试,目前只支持webkit内核的浏览器,比如,谷歌,Safari,edge,360安全和360极速浏览器的极速模式,火狐,IE,opera等不支持 Demo <html> <head> <meta charset="utf-8" /> <title>

CSS3特性修改(自定义)浏览器默认滚动条

前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成一个页面元素来定义,再结合一些CSS3属性,比如圆角.渐变.rgba等等.最常见的伪元素,我们最熟悉的元素之前和元素之后(::before/::after)[伪类(:hover/:link)].这里写了一个Demo,来看看... 一.HTML <div class="banner_box&qu

-webkit-appearance改变任何元素的浏览器默认风格

前段时间,公司有个紧急发布会,需要在移动端做一个邀请函的页面.但是在实现下拉框的时候,IOS和安卓展示的效果总是不一样.经过我一番查找,偶然间发现了-webkit-appearance这个样式属性.后来仔细研究了一下,现在和大家分享一下. 先来介绍一下这个属性: appearance:来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”.“选择框”等效果.怎么样,光看到这里就感觉到够牛逼了吧. 接下来看看用法

改变浏览器中默认的ctrl+s方法

在一般的情况下,我们在浏览网页的时候按下ctrl+s,浏览器会弹出一个保存网页的框. 但是在一些特定的网页中,我们希望ctrl+s不是弹出默认的保存窗口,而是进行一下别的操作. 比如在我们使用简书的时候,我们按下ctrl+s的时候,是不会弹出保存窗口的.而是把我们正在编辑的文字进行保存.这个操作在一些特定的网页中是十分必要的.因为我们在编辑的文字的时候,会习惯性地按下ctrl+s进行保存,如果这个时候弹出保存窗口的话,肯定是不方便的. <script> document.addEventLis

css知多少（4）——解读浏览器默认样式

上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的.而最有的说的就是浏览器的默认样式. 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情.虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读咱们慢慢道来(只说重点,比较容易的或者不常用的

纯JS阻止浏览器默认滚动事件，实现自定义滚动方法

首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏览器大小的距离function windowScroll(id, number, direction) { var oHtml = document.documentElement; //在IE8以下不支持使用class选取元素,这里采用id var oContent = document.getE

浏览器默认样式(user agent stylesheet)+cssreset

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF

原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名

1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( &qu

css知多少（4）——解读浏览器默认样式（转）

css知多少(4)——解读浏览器默认样式上一节<css知多少(3)——样式来源与层叠规则>介绍了样式的五种来源,咱们再通过一张图回顾一下. 对于上面的三层,咱们大概都比较熟悉了.下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的.而最有的说的就是浏览器的默认样式. 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情.虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读

浏览器默认标签样式总结及css初始化程序（转）

浏览器默认标签样式总结及css初始化程序 html中的大部分的标签都有一些糟糕的样式,有的是标签天然自带的,有的是浏览器默认设置的,我们在写网页时,这些默认的样式就会时不时的跳出来捣一下乱,搞得我们很是无奈.所以成手在写css样式时,一般都会在开头写一段初始化程序,来去掉这些默认样式,比如最简单的方法就是使用*{margin:0:padding:0:}.但是通常我们很少使用这种方法,因为通配符*的效率极低.那我们应该使用哪种方法呢,下面博主就来为大家介绍一些常用的方法. 一.浏览器默认样式总

Selenium（十三）调用js，控制浏览器的滚动条

WebDiver 不能操作本地 Windows 控件,但对于浏览器上的控件也不是都可以操作的.比如浏览器的滚动条,虽然 WebDriver 提供操作浏览器的前进和后退按钮,但对于滚动条并没有提供相应用的方法.那么在这种情况下就可以借助 JavaScript 方法来控制浏览器滚动条.WebDriver 提供了 execute_script()方法来执行 JavaScript 代码. 一般用到操作滚动条的会两个场景: 注册时的法律条文的阅读,判断用户是否阅读完成的标准是:滚动条是否拉到最下方. 要操

浏览器默认样式及reset

写在前面首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding等.这就是不同浏览器初始化样式不同的原因.也是为什么要做css reset的原因. 注:chrome等可以在调试工具里看到默认样式,是不可修改的,置灰的,如下图.各浏览器默认样式详情请参考<浏览器默认样式对比表>. 1.浏览器默认样式这里无需过多赘述,最直观的就是上表,给大家几个地址: 1.浏览

JQuery 阻止js事件冒泡阻止浏览器默认操作

//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a href="javascript:alert('啦啦啦');"> <ul onclick="alert('德玛西亚');"> <li onclick="alert('大盖伦');"></li> </ul&

关于iscroll阻止浏览器默认动作

使用iscroll时,移动端遇到需要长按复制功能,但是iscroll屏蔽了浏览器默认事件,所以实现不了. 解决方案: myScroll = new IScroll('#wrapper',{ preventDefault:false, });//去掉屏蔽 /*----------------------------------------*/ document.addEventListener("touchmove",function(e){ e.preventDefault(); },

浏览器默认样式（User Agent Stylesheet）

原文:http://www.zjgsq.com/898.html 不同浏览器对于相同元素的默认样式并不一致,这也是为什么我们在CSS的最开始要写 * {padding:0;marging:0}: 不过现在说的可不只是这些.基本上,不同内核的两个浏览器在某些元素的表现都会存在差异,比如缩进的大小.字体选择.字符样式等.也许一个很漂亮的CSS样式表在一个浏览器上表现良好,在另外一个浏览器上即使是没有CSS Bug的情况也会变得结构混乱起来,我都是浏览器默认样式在作怪. 因此,我们在生成CSS样式规则

css 框架——base.css，作用是重设浏览器默认样式和提供通用原子类。自己留存

今天发下我自己的 css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类. @charset "utf-8"; /*! * @名称:base.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { background:white; color:black; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,o

js阻止浏览器默认行为

js阻止浏览器默认行为 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a id="a1" href="http://www.baidu.com">百度</a> <script> function

js停止冒泡和阻止浏览器默认行为

停止冒泡通用方法: function stopBubble(e) { //如果提供了事件对象,是非IE浏览器 if ( e && e.stopPropagation ) //使用W3C的stopPropagation()方法 e.stopPropagation(); else //使用IE的cancelBubble = true来取消事件冒泡 window.event.cancelBubble = true; } 阻止浏览器默认行为-通用方法 //阻止浏览器的默认行为 function s

html关于强制显示隐藏浏览器的滚动条

浏览器的滚动条在一些特殊的展示中,是不需要的,所以必须把它隐藏掉,文章主要介绍一些隐藏或者显示IE的水平或者垂直滚动条的实现代码,需要了解的朋友可以参考下: 相关css代码如下: //强制显示滚动条: html { overflow: scroll; } //强制隐藏滚动条: html { overflow: hidden; } //隐藏IE的水平滚动条: html { overflow-x: hidden; } //隐藏IE的垂直滚动条: html { overflow-y: hidden;

react 改变浏览器默认滚动条

热门专题