快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

万博max官网手机版_酒文化网进入



主流浏览器默觉得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会根据用户定义的宽度和高度谋略内容的显示宽度以及滚动条显示的高度并添加交互的事故。万博max官网手机版

详细代码实现

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。这里无论元素万博max官网手机版自定义属性data-scroll="true"或者data-scroll="false"都邑应用自定滚动条覆盖系统默认滚动条,squid的getElementsByAttribute()措施只是供给经由过程元素是否有指定属性来查找元素而轻忽属性值,这个措施没有jquery选择器或者高档浏览器供给的querySelectorAll()措施强大年夜,由于这里squid只是做最基础的支持。找到必要自定义滚动条的元素之后调用initView措施来初始化滚动条整体布局和显示。

initView: function(elems) {

var i = 0,

length = elems.length,

elem;

for(; i

elem = elems[i]

if(this.hasScroll(elem)) {

this.create(elem)

}

}

this.initEvent()

}

initView()措施会首先对页面上获取的带有自定义属性data-scroll的元素遍历,判断每一个元素是否会万博max官网手机版呈现滚动条,经由过程hasScroll()措施判断。假如元素会呈现滚动条文调用create()措施分手创建自定义的滚动条。initView()措施停止会调用initEvent()措施。

//是否有滚动条

hasScroll: function(elem) {

return elem.offsetHeight

}

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)

}

create()措施用户调剂创建带有自定义滚动条的元素整体布局,首先经由过程创建了wrapper元素,用于包装会呈现滚动条的元素elem和滚动条可滚动的区域元素list以及滚动条元素s。经由过程从呈现滚动条元素设置的自定义属性data-width、data-height分手设置wrapper元素的宽度和高度。经由过程scrollbarHeight()措施谋略获得了滚动条元素显示的高度,整体布局不算繁杂。创建自定义滚动条整体布局之后是为滚动条元素s和滚动条可到达区域元素list添加事故处置惩罚,经由过程regEvent()措施实现。

//谋略滚动条的高度

scrollbarHeight: function(elem, height) {

var value = elem.scrollHeight;

return (height / value) * height

}

scrollbarHeight()措施经由过程简单的数学谋略返回滚动条元素应该显示的高度。

initEvent: function() {

var that = this,

_default,

elem,

top,

min,

max,

prev,

parent,

sbody,

unit;

//滚动条滚动

squid.on(document, 'mousemove', function(event) {

elem = that.scrolling.elem

if(elem !== null) {

squid.addClass(elem, 'scrolling')

top = event.clientY - that.scrolling.diffy

parent = that.ie6 ? elem.parentNode.parentNode : elem.parentNode

min = that.limits[elem].min

max = that.limits[elem].max

prev = parent.previousSibling

sbody = prev.tagName.toLowerCase() === 'div' ? prev : prev.previousSibling

_default = parseInt(sbody['data-height'] || sbody.getAttribute('data-height'), 10)

unit = (sbody.scrollHeight - _default) / max

squid.addClass(sbody.parentNode, 'unselectable')

if(top

top = min

}else if(top > max) {

top = max

}

elem.style.top = top + 'px'

that.doScroll(sbody, top * unit)

}

})

//滚动停止

squid.on(document, 'mouseup', function(event) {

elem = that.scrolling.elem

if(elem) {

prev = that.ie6 ? elem.parentNode.parentNode.previousSibling : elem.parentNode.previousSibling

sbody = prev.tagName.toLowerCase() === 'div' ? prev : prev.previousSibling

squid.removeClass(sbody.parentNode, 'unselectable')

}

that.scrolling.elem = null

that.scrolling.diffy = 0

})

}

initEvent()措施实现了为document元素添加mousemove和mouseup事故,mousemove实现了在拖动滚动条元素滚动时查看的内容跟随变更。代码首先判断当前是否有拖动滚动条查看内容的操作,假如有就谋略滚动条被拖动到的位置,然后谋略查看内容应该到的地方。代码里对ie6的判断,是由于引入的PIE.htc文件破坏了原有的布局(为了实现跨浏览器下显示效果的同等,付出太大年夜了!!!)。mouseup事故处置惩罚法度榜样实现了清除上次操作的滚动条元素。

//添加滚动条事故

regEvent: function(elem) {

var that = this,

sbody = elem.firstChild,

list = sbody.nextSibling,

//滚动条元素

s = list.firstChild,

//滚动条滚动最小值

min = 0,

//滚动条滚动最大年夜值

max = list.offsetHeight - s.offsetHeight,

_default = parseInt(sbody['data-height'] || sbody.getAttribute('data-height'), 10),

unit = (sbody.scrollHeight - _default) / max,

//firefox浏览器

firefox = 'MozBinding' in document.documentElement.style,

//鼠标滚轮事故

mousewheel = firefox ? 'DOMMouseScroll' : 'mousewheel',

//opera浏览器

opera = window.oprea && navigator.userAgent.indexOf('MSIE') === -1,

//is firing mousedown event

firing = false,

//鼠标点击,准时器履行光阴

interval,

//滚动条间隔容器高度

top,

//滚动条当前top值

cur,

//每次滚动若干像素

speed = 18;

//变量缓存min, max

this.limits[s] = {

min: 0,

max: max

}

//scroll事故 鼠标滑动滚轮移动滚动条

squid.on(elem, mousewheel, function(event) {

var delta;

if(event.wheelDelta) {

delta = opera ? -event.wheelDelta / 120 : event.wheelDelta / 120

}else{

delta = -event.detail / 3

}

cur = parseInt(s.style.top || 0, 10)

//向上滚动

if(delta > 0) {

top = cur - speed

if(top

top = min

}

}else{//向下滚动

top = cur + speed

if(top > max) {

top = max

}

}

s.style.top = top + 'px'

that.doScroll(sbody, top * unit)

//阻拦body元素滚动条滚动

event.preventDefault()

})

//ie6, 7, 8下,假如鼠标继续点击两次且光阴距离太短,则第二次事故不会触发

//拖动滚动条,点击滚动条可到达区域

squid.on(list, 'mousedown', function(event) {

var target = event.target,

y = event.clientY;

target = event.target

if(target.tagName.toLowerCase() === 'shape')

target = s

//鼠标点击元素是滚动条

if(target === s) {

//invoke elem setCapture

s.setCapture && s.setCapture()

that.scrolling.diffy = y - s.offsetTop

//鼠标移动历程中判断是否正在拖动滚动条

that.scrolling.elem = s

}else if(target.className.match('jscroll-list')){

firing = true

interval = setInterval(function() {

if(firing) {

that.mouseHandle(list, y, unit)

}

}, 80)

}

})

//鼠标松开滚动条竣事滚动

squid.on(list, 'mouseup', function() {

//invoke elem releaseCapture

s.releaseCapture && s.releaseCapture()

firing = false

clearInterval(interval)

})

//滚动条元素获取焦点,可以触发keyup事故

squid.on(s, 'click', function() {

this.focus()

})

//滚动条获取焦点后,触发键盘高低键,滚动条滚动

squid.on(s, 'keydown', function(event) {

var keyCode = event.keyCode,

state = false;

cur = parseInt(s.style.top || 0, 10)

switch(keyCode) {

case 38:

top = cur - speed

if(top

top = min

}

state = true

break

case 40:

top = cur + speed

if(top > max) {

top = max

}

state = true

break

default:

break

}

if(state) {

s.style.top = top + 'px'

that.doSc万博max官网手机版roll(sbody, top * unit)

}万博max官网手机版

event.preventDefault()

})

}

regEvent()措施实现了以下功能,应该是jscroll组件的核心措施了:

1. 鼠标在包孕滚动条的元素区域,高低滚动鼠标滚轮,查看的内容跟随滚轮高低翻的功能

2. 点击滚动条可到达区域,即滚动条上方或者下方,滚动条和查看的内容向上或者向下滚动。鼠标点击滚动条可到达区域不松开,可继续滚动滚动条和查看的内容,经由过程调用mouseHandle()措施来详细实现该功能。

3. 点击滚动条元素后,可以经由过程键盘高低键来触发滚动条和查看内容的滚动

//鼠标点击滚动条可到达区域上面或者下面时,滚动条滚动

mouseHandle: function(elem, place, unit) {

var prev = elem.previousSibling,

//包孕滚动条显示内容元素

a = prev.tagName.toLowerCase() === 'div' ? prev : prev.previousSibling,

//

n = elem.firstChild,

//滚动条元素

s = this.ie6 ? n.lastChild : n.tagName.toLowerCase() === 'div' ? n : n.nextSibling,

//滚动条高度

height,

//list元素距body的top值

value,

//滚动条间隔容器高度

top,

//滚动条距body的top值

sTop,

//滚动条滚动最小值

min,

//滚动条滚动最大年夜值

max,

//每点击滚动条可到达区域,滚动条向下或向上移动10px

step = 10,

//鼠标点击滚动条可到达区域间隔最顶端或者最底端小于distance时,滚动条能够自动移动到最顶端或者最低端

distance = 20;

min = this.limits[s].min

max = this.limits[s].max

height = s.offsetHeight

top = parseInt(s.style.top || 0, 10)

value = squid.getOffset(elem).top

sTop = squid.getOffset(s).top

//鼠标点击滚动条下方区域,滚动条向下滚动

if(place > sTop) {

if(value + elem.offsetHeight - place

top = max

}else{

if((sTop + height + step)

top += step

}else{

top = place - value - height

}

}

}else{

//鼠标点击区域距滚动条顶端小于滚动条长度时,滚动条自动滚动到最顶端

if(place - value

top = min

}else{

//滚动条距页面顶部高度减去鼠标clientY值大年夜于step

if(sTop - place >= step) {

top -= step

}else{

top = place - value

}

}

}

if(top

top = min

}else if(top > max) {

top = max

}

s.style.top = top + 'px'

this.doScroll(a, top * unit)

}

mouseHandle()措施经由过程判断鼠标点击位置在页面中的位置坐标,和滚动条元素在页面中的位置来判断是点击了滚动条的上方区域照样下方区域。假如点击了下方区域则滚动条向下滚动,否则向上滚动,对付点击的位置在上方区域或者下方区域小于distance值时,滚动条自动滚动到最小值或者最大年夜值。

显示效果

该控件的demo应用了淘宝网用户注册协议内容,由于firefox、chrome等高档浏览器都能包管很好的兼容性和显示效果,以是这里只展示ie低版本浏览器显示效果, ie浏览器显示截图如下:

ie6下

初始化之后

滚动历程中

滚动到底部

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: