分享一款自制的網(wǎng)頁滾動條樣式

2024-09-05 12:18:15

字體：大中小

供稿：網(wǎng)友

在此分享給大家一款自制的網(wǎng)頁滾動條效果代碼，需求：一個容器固定高度，其內(nèi)容高度大于自身高度，要求overflow:scroll。問題：1）在容器內(nèi)不能響應(yīng)mousewhee事件；2）沒有使用事件監(jiān)聽；3）容器內(nèi)如果有圖片，高度獲取可能不正確，或許還有其它的。不過，對付簡單的需求還是可以的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>自制滾動條樣式</title></head><body><style type="text/css">#wraper{position:relative;width:500px;height:200px;padding-right:10px;background-color:#F6F6F6;overflow:hidden;}#slider{position:absolute;top:0;left:0;margin:0 10px;line-height:1.5;font-size:12px;color:#333;}#pannel{position:absolute;right:0;top:0;width:6px;height:100%;background-color:#EDEDEB;}#drag{position:absolute;left:0;width:6px;height:80px;background-color:#BCBCBA;cursor:pointer;}</style><div   class="iwvjtn8m0"   id="wraper">	<div   class="iwvjtn8m0"   id="slider">    	<p>天翼手機俱樂部#今天下午，中國電信將聯(lián)合摩托羅拉推出電信定制版的“刀鋒戰(zhàn)士”：鋒云XT928。搭載4.5 英寸720p分辨率(1280 x 720 像素)高清觸控屏，1300 萬像素攝像頭，運行Android 2.3 系統(tǒng)，內(nèi)置 1.2GHz 雙核處理器，擁有 1GB RAM。支持CDMA2000 EVDO+GSM雙網(wǎng)雙待，以及WIFI/WAPI接入移動互聯(lián)網(wǎng)</p>        <p>【酒量最好的前三名星座】冠軍（巨蟹座）、亞軍（魔羯座）、季軍（金牛座）【酒品最好的前三名星座】冠軍（天秤座）、亞軍（雙魚座）、季軍（水瓶座）【酒量不好，有酒膽，會耍寶的前三名星座】冠軍（雙子座）、亞軍（射手座）、季軍（獅子座）。</p>        <p>【安卓軟件推薦】動態(tài)企鵝桌面時鐘是一款以一只可愛小企鵝為題材的桌面時鐘！需要你在主屏幕按menu菜單鍵添加插件顯示使用。它表情可愛，動作多多，你亦可連按小工具，它就會轉(zhuǎn)換表情動作，另外還可以和小企鵝互動，喂它喝飲料，吃東西，還可以和小企鵝玩石頭剪子布。</p>　　    </div>    <div   class="iwvjtn8m0"   id="pannel">    	<div   class="iwvjtn8m0"   id="drag"></div>    </div></div><script type="text/javascript">var o1 = document.getElementById('slider'),	o2 = document.getElementById('pannel'),	o3 = document.getElementById('drag');function customBar(oSlider, oPanel, oTrigger){	this.parent = oSlider.parentNode;	this.slider = oSlider;	this.panel = oPanel;	this.trigger = oTrigger;		this.h1 = this.parent.clientHeight;	this.h2 = this.slider.offsetHeight;	this.h3 = this.panel.clientHeight;	this.h4 = this.trigger.offsetHeight;		this.k = (this.h2 - this.h1)/(this.h3 - this.h4);	this.dis = 0;	this.flag = false;		this.init();}customBar.prototype = {	init: function(){		if(this.k <= 0){			this.panel.style.display = 'none';			return;		}		this.slider.style.top = '0px';		this.trigger.style.top = '0px';		this.bind();			},	bind: function(){		var that = this;		this.trigger.onmousedown = function(e){			that.down.call(that, e);			}		this.trigger.onmousemove = document.onmousemove = function(e){			that.move.call(that, e);		}		this.trigger.onmouseup = document.onmouseup = function(e){			that.up.call(that, e);		}	},	down: function(e){		var e = window.event || e,			y1 = e.y || e.pageY,			y2 = parseInt(this.trigger.style.top);		this.dis = (y1 - y2);		this.flag = true;		this.move(e);	},	move: function(e){		if(!this.flag) return;		var e = window.event || e,			y1 = e.y || e.pageY,			dis;		dis = Math.min(Math.max(y1 - this.dis, 0), (this.h3 - this.h4));		this.slider.style.top = -dis * this.k + 'px';		this.trigger.style.top = dis + 'px';	},	up: function(){		this.flag = false;	},	wheel: function(){			}}var ss = new customBar(o1, o2, o3);</script></body></html>

上一篇：jQuery屬性選擇器功能演示

下一篇：動態(tài)帶緩沖“返回頂部”代碼