javascript 模仿html元素转动条 jscroll
|
副问题[/!--empirenews.page--]
主流赏识器默以为html元素提供的转动条不雅观，并且前端开拓职员想对其通过css举办同一样式的美化也是不行实现的。好比ie可以通过样式来实现简朴的美化、Webkit内核赏识器可以节制转动条的表现结果，firefox则不应承用户为转动条界说样式。可是对付追求友爱的用户体验的前端开拓职员，是不会被这些赏识器的纷歧致举动所阻止的。我们可以本身通过尺度的html元素模仿来实现自界说的转动条。 这里是本身在事变不太忙的时辰写出来了一个用户可以自界说的转动条jscroll，以下简称jscroll。jscroll默认只提供一种转动条样式，部门样式来自google webstore ，个中有部门css3样式首要用于实现圆角，阴影结果。为实现跨赏识器环境下转动条表现结果的同等，对付ie6, 7, 8不支持css3的赏识器引入了 PIE.htc 文件。下面就实现的成果以及兼容性、行使要领、详细代码实现别离做一下讲授。 实现成果以及兼容性 jscroll实现了体系默认转动条的险些全部成果，好比：拖动转动条查察内容、转动鼠标滚轮查察内容、点击转动条可达到地区的上方可能下方来触发转动条的转动、键盘上下键来触发转动条的转动。firefox、chrome,、ie9+ 等最新赏识器支持css3以及js的最新API，以是没有任何兼容性题目。ie6, 7, 8 不支持css3通过引入PIE.htc 的hack文件来做兼容处理赏罚。js方面临付不支持的API通过旧的API来做了兼容。有最大兼容性题目的赏识器是ie6，不支持点击转动条可达到地区来触发转动条转动，也不支持键盘上下键来触发转动条的转动。导致这个题目的缘故起因首要是由于引入了支持css3的PIE.htc文件，假如不引入该hack文件，全部操纵都能支持，没法办为了表现结果的同等，只好选择了不支持部门成果。 行使要领 行使自界说转动条最多的环境应该是页面弹出层，可能是页面上某一个地区，万万不要对整个页面的转动条举办自界说操纵。对付必要行使jscroll的元素，必要添加自界说属性data-scroll="true"来汇报措施必要行使jscroll来替代体系默认的转动条，同时还必要通过添加自界说属性data-width=""、data-height=""来指定元素要表现的宽度和高度。jscroll会按照用户界说的宽度和高度计较内容的表现宽度以及转动条表现的高度并添加交互的变乱。 详细代码实现 jscroll的实现逻辑并不伟大，实现详细成果的js代码不到400行，可是这里依靠了一些基本的要领，以是必要引入squid.js作为基本要领的支持。对转动条样式的节制的css在一个单独的jscroll-1.0.css文件内里，用户可以本身修改扩展以满意本身的需求。下面是对实现详细成果的每个要领做一个简朴的说明： init: function(selector, context) {selecotr = selector || 'data-scroll' context = context || document var elems = squid.getElementsByAttribute(selector, context) this.initView(elems) } init()是初始化函数，按照指定selector和context获取必要行使自界说转动条的元素，selector默认是data-scroll，上下文默认是当前document。这里无论元素自界说属性data-scroll="true"可能data-scroll="false"城市行使自定转动条包围体系默认转动条，squid的getElementsByAttribute()要领只是提供通过元素是否有指定属性来查找元素而忽略属性值，这个要领没有jquery选择器可能高级赏识器提供的querySelectorAll()要领强盛，由于这里squid只是做最根基的支持。找到必要自界说转动条的元素之后挪用initView要领来初始化转动条整体布局和表现。 initView: function(elems) {var i = 0, length = elems.length, elem; for(; i < length; i++) { elem = elems[i] if(this.hasScroll(elem)) { this.create(elem) } } this.initEvent() } initView()要了解起首对页面上获取的带有自界说属性data-scroll的元素遍历，判定每一个元素是否会呈现转动条，通过hasScroll()要领判定。假如元素会呈现转动条则挪用create()要领别离建设自界说的转动条。initView()要领竣事会挪用initEvent()要领。 //是否有转动条hasScroll: function(elem) { return elem.offsetHeight < elem.scrollHeight } hasScroll()要领用于判定元素是否会呈现转动条，返回true可能false。这里忽略元素的margin和padding，通过jscroll建设的转动条默认margin和padding都是0。 //建设转动条元素整体布局create: function(elem) { var wrapper, list, //转动条元素 s, //带转动条元素表现的高度 height = elem['data-height'] || elem.getAttribute('data-height'), //带转动条元素表现的宽度 width = elem['data-width'] || elem.getAttribute('data-width'), //转动条表现高度 value; //wrapper wrapper = document.createElement('div') wrapper.className = 'jscroll-wrapper' //forbid select text, for ie9 /* * wrapper.onselectstart = function() { * return false * } */ squid.css(wrapper, { height: height + 'px', width: width + 'px' }) squid.addClass(elem, 'jscroll-body') //overwrite the user define style squid.css(elem, { overflow: 'visible', position: 'absolute', height: 'auto', width: (width - 40) + 'px', padding: '0 20px 0 23px' }) //list list = document.createElement('div') list.className = 'jscroll-list unselectable' list.unselectable = 'on' squid.css(list, { height: (height - 5) + 'px' }) //转动条 s = document.createElement('div') s.className = 'jscroll-drag unselectable' s.unselectable = 'on' s.setAttribute('tabindex', '1') s.setAttribute('hidefocus', true) list.appendChild(s) wrapper.appendChild(list) //把必要呈现转动条的元素包裹起来 elem.parentNode.replaceChild(wrapper, elem) wrapper.insertBefore(elem, list) //转动条高度 value = this.scrollbarHeight(elem, height) squid.css(s, { height: value + 'px' }) //add event this.regEvent(wrapper) } （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
