您的位置： >
JS+CSS实现的网页内的滚动条样式效果
JS+CSS实现的网页内的滚动条样式效果
　　在此分享给大家一款JS+CSS实现的网页内的滚动条样式效果代码，需求：一个容器固定高度，其内容高度大于自身高度，要求overflow:scroll。问题：1）在容器内不能响应mousewhee事件；2）没有使用事件监听；3）容器内如果有图片，高度获取可能不正确，或许还有其它的。不过，对付简单的需求还是可以的。
　　示例：
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&自制滚动条样式&/title&
&style type=&text/css&&
#wraper{position:width:500height:200padding-right:10background-color:#F6F6F6;overflow:}
#slider{position:top:0;left:0;margin:0 10line-height:1.5;font-size:12color:#333;}
#pannel{position:right:0;top:0;width:6height:100%;background-color:#EDEDEB;}
#drag{position:left:0;width:6height:80background-color:#BCBCBA;cursor:}
&div id=&wraper&&
&div id=&slider&&
&p&天翼手机俱乐部#今天下午，中国电信将联合摩托罗拉推出电信定制版的&刀锋战士&：锋云XT928。搭载4.5 英寸720p分辨率(1280 x 720 像素)高清触控屏，1300 万像素摄像头，运行Android 2.3 系统，内置 1.2GHz 双核处理器，拥有 1GB RAM。支持CDMA2000 EVDO+GSM双网双待，以及WIFI/WAPI接入移动互联网&/p&
&p&【酒量最好的前三名星座】冠军（巨蟹座）、亚军（魔羯座）、季军（金牛座）【酒品最好的前三名星座】冠军（天秤座）、亚军（双鱼座）、季军（水瓶座）【酒量不好，有酒胆，会耍宝的前三名星座】冠军（双子座）、亚军（射手座）、季军（狮子座）。&/p&
&p&【安卓软件推荐】动态企鹅桌面时钟是一款以一只可爱小企鹅为题材的桌面时钟！需要你在主屏幕按menu菜单键添加插件显示使用。它表情可爱，动作多多，你亦可连按小工具，它就会转换表情动作，另外还可以和小企鹅互动，喂它喝饮料，吃东西，还可以和小企鹅玩石头剪子布。&/p&　　
&div id=&pannel&&
&div id=&drag&&&/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.parentN
this.slider = oS
this.panel = oP
this.trigger = oT
this.h1 = this.parent.clientH
this.h2 = this.slider.offsetH
this.h3 = this.panel.clientH
this.h4 = this.trigger.offsetH
this.k = (this.h2 - this.h1)/(this.h3 - this.h4);
this.dis = 0;
this.flag =
this.init();
customBar.prototype = {
init: function(){
if(this.k &= 0){
this.panel.style.display = 'none';
this.slider.style.top = '0px';
this.trigger.style.top = '0px';
this.bind();
bind: function(){
var that =
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 =
this.move(e);
move: function(e){
if(!this.flag)
var e = window.event || e,
y1 = e.y || e.pageY,
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 =
wheel: function(){
var ss = new customBar(o1, o2, o3);
&/html&&div style=&text-align:margin:30px 0 0 0;&&&hr style=&color:#999;height:1&&如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：&a href='/' target='_blank'&/&/a&&/div&提示：可修改后代码再运行!
上一篇： 下一篇：我想用JS判断滚动条的位置，从而触发事件_百度知道
我想用JS判断滚动条的位置，从而触发事件
window.onscroll=function(){var x=document.documentElement.scrollTif(x=2000){alert(2000);}}我用这个函数，但是我一动滚动条，它马上就转到2000这个位置了，错在哪里》？
我有更好的答案
if(x==2000)
改成==就不能触发后面的IF语句了，我要写一个当滚动条移动到2000的位置是才弹出一个警告框，要怎么写？
你2000设置的太大了。
我的网页不止2000PX啊
整个滚动条有5000PX
刚才试了几遍，onscroll事件的执行貌似并不是很“快速”，所以2000设置的太精确。你试：if(x&=1950&&x&=2050) 或者范围再小些。不知是否符合你的要求。---------另外，刚知道onscroll是HTML5的新出的，各浏览器的支持也不同。
其他类似问题
滚动条的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁window.opener，是通过window.open打开子窗体的父窗体的引用。& & 比如在父窗体parentForm里面，通过window.open("subForm.html"),那么在subform.html中window.opener就代表parentForm。既然在子窗体中能够拿到父窗体的引用，那么就可以在子窗体中设置父窗体的字段值或者调用js方法。& & 实例：添加人员信息时，其中的机构信息通过子窗体完成输入& & 父亲窗体，用于添加人员信息。& & 子窗体完成输入后，机构信息（id、name）自动填充到父窗体的orgId、orgName域& & & & html代码& & 复制代码代码如下:& & & & 机构& & & & & & & & & & <input type="button"name="selectOrgButton" value="选择机构"& & nclick="openWin('org.do?select=true','selectorg',800,500,1)">& & & & & & JS代码& & 复制代码代码如下:& & /*& & *打开新窗口（通过window.open()）& & * f:链接地址& & * n:窗口的名称& & * w:窗口的宽度& & * h:窗口的高度& & * s:窗口是否有滚动条，1：有滚动条；0：没有滚动条& & */& & functionopenWin(f,n,w,h,s){& & sb= s == "1" ? "1" : "0";& & l= (screen.width - w)/2;& & t= (screen.height - h)/2;& & sFeatures= "left="+ l +",top="+ t +",height="+ h+",width="+ w& & +",center=1,scrollbars=" + sb +",status=0,directories=0,channelmode=0";& & penwin= window.open(f , n , sFeatures );& & if(!openwin.opener)& & openwin.opener=& & openwin.focus();& && & }& & 子窗体，供选择机构信息。& & 当选择后（通过单击radio），机构信息（id、name）将填充到父窗体的orgId、orgName域& & & & html代码& & 复制代码代码如下:& & & & & & & & & & & & & & & & ${org.id}& & ${org.name}& & ${org.sn }& & ${org.parent.name}& & & & & & & & JS代码& & 复制代码代码如下:& & functionselectOrg(id,name){& & if(window.opener){& & window.opener.document.all.orgIdId.value=& & window.opener.document.all.orgNameId.value=& & window.close();& & }& & }& & 选择机构信息后的结果& & & & 完成机构信息（id、name）的输入了，只是id在隐藏域中，看不到而已。& & 小结& & 说到对父窗体的引用，除了window.opener，就是window.parent了。window.opener是用于通过window.open方式打开子窗体，而window.parent是用于通过iframe方式打开子窗体。& & 您可能感兴趣的文章:javascript. window.opener的用法分析JS window.opener返回父页面的应用& & QQ空间
百度搜藏更多& & Tags：window opener& & 复制链接收藏本文打印本文关闭本文返回首页& & 上一篇：JavaScript异步编程:异步数据收集的具体方法& & 下一篇：html文本框提示效果的示例代码& & 相关文章分页栏的web标准实现使用js的replace()方法查找字符示例代码js图片向右一张张滚动效果实例代码js字符串截取函数substr substring slice使用对比javascript. 获取多条数据(模拟ajax获取数据)使用js判断数组中是否包含某一元素(类似于php中的in_array())浅析js中的浮点型运算问题对javascript的一点点认识总结《javascript高级程序设计》读书笔javascript操作excel生成报表全攻略JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现& & 文章评论& & 最 近 更 新& & js设置文本框中焦点位置在最后的示例代码javascript. 系统文件夹文件操作及参数介绍表格 隔行换色升级版javaScript. window.event.keyCode 集合与js中call与apply的用法小结js日期相关函数总结分享javascript-简单的日历实现及Date对象语法FileUpload上传图片(图片不变形)js去除空格的12种实用方法javascript读写XML实现广告轮换(兼容IE、& & 热 点 排 行& & js刷新页面方法大全清除网页历史记录，屏蔽后退按钮js中cookie的使用详细分析javascript深入理解js闭包JS鼠标事件大全 推荐收藏Javascript. 的addEventListener(js验证表单大全js 获取浏览器高度和宽度值(多浏js 字符串操作函数比较全的JS checkbox全选、取消全
说明：该文章系网友上传分享，若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
上一篇：下一篇：
相关经验教程
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.002 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.002 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益先做点儿题外话……
最近比较懒，日志基本没有更新呵呵，这篇算是应付吧。
判断方法：
当可视区域小于页面的实际高度时，判定为出现滚动条，即：
if (document.documentElement.clientHeight & document.documentElement.offsetHeight) scroll =
要使用 document.documentElement ，必须在页面头部加入声明：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
应付完毕……
貌似我的DreamHost空间要到期了，自己有服务器，就不想花钱续了。
&#8211;EOF&#8211;
This entry was posted in ,
and tagged , . Bookmark the .
Leave a Reply
Recent PostsEXTJS滚动条的问题的相关文章推荐-javascript-电脑编程网我在一个window里面嵌套了一个toolbar和一个panel我设置window的autoScroll为true，但是滚动条滚动的时候toolbar就不显示了！我需要在panel里面显示滚动条，求解决方案！------回答---------------其他回答（10分）---------CSS code将toolbar设置成window的对象，不要设置panel的toolbar也可以改变布局方式，window里放一个panel，panel放一个toolbar、panel最后一个panel设置滚动条即可------其他回答（10分）---------如果toolbar 和 panel 同级的话，估计是panel高度或宽度过大，压盖了toolbar， 你调整下两者的位置和大小。测试可以在两者之间加个其他明显的标记，比如使panel的border显示出来呀。------其他回答（10分）---------路过，积点分------其他回答（10分）---------自己测试下哈将window和...作者：yuan1238　和相关　相关专题文章：例如DIV的宽度和高度分别是500*400初始化的时候就有一个tab且宽和高占满了DIV但新增一个tab的时候宽度和高度都比原先的数值大，出现了滚动条，而我想让它占满DIV代码：var tab = new Ext.TabPanel({width : divWidth,//返回500height :
divHeight,//返回400renderTo: listDivId,autoDestroy:false,title : 'fffff...作者：M2276699　和相关　在有些网站（比如）的评论是在滚动条滚动到评论的位置才去加载评论的，这用到了JS的什么事件，怎么实现的？------回答---------------其他回答（30分）---------&body onscroll=&这里写个函数判断滚动条到哪了，是否继续加载评论&&另外，那些都是客户端的js实现的，你可以查看他们的源代码即可------其他回答（10分）---------scr...作者：daniel_duan　和相关　用JS模拟了一个滚动条。理想状态是：用户在该DIV里滚动鼠标的滚轮，那么浏览器的滚动条是不动的。但如果用户在DIV外滚动鼠标的滚轮，那么滚动的将是浏览器的滚动条。目前出了一个问题IE下，我只需要onmousewheel事件里return false，浏览器的滚动条是会不动的。但其它浏览器下，我鼠标在DIV里滚动滚轮，浏览器的滚动条一起动了，怎么解决。------回答---------------其他回答（40分）---------HTM...作者：guoerwei　和相关　jquery的autocomolete插件，设置了滚动属性，在Chrome里正常，但是在IE8里不出现滚动条，有没有遇到类似问题的，怎么解决？/problems/35407这里有个一样问题的，但是解答看不明白------回答---------------其他回答（15分）---------这个插件倒是用过，但没碰到那个问题。------其他回答（20分）---------IE6,firefox...作者：Silence_Smile　和相关　ExtJs 就是把显示层（html）的东西交给客户端业务层（javascript）做了。这合理吗？页面代码严重耦合了。比如想给网站换个样子，一般思路是换个.css即可，但如果使用extjs需要重写javascript啊！ 我=菜鸟；菜鸟=发表谬论；return 大家的高见！------回答---------------其他回答（20分）---------顶楼上的，一般如果是要发布到网上的网站我建议最好就是不要全部用 ext 来做界面，1...作者：wupengfei1987　和相关　有Ext.ux.plugins.GroupHeaderGrid表头的grid 能不能实现LockingGrid的效果? 怎样实现?------回答---------------其他回答（20分）---------不懂EXTJS,帮顶...------回答---------------其他回答（20分）---------不懂EXTJS,帮顶......作者：kael_fk_　和相关　到网上查资料给ext的文本框添加了一个点击事件（该文本框在window1中），处理这个事件的函数写上window.open(.....),这个窗口中显示的一个grid（这个窗口为window2），里面的数据是从后台获得。事件的添加方法：form_name.findById('type').getEl().dom.attachEvent('onclick',choiceType);但是现在出现了一个问题：我第一次点击这个文本框是，数据显示...作者：kakaroot_cl　和相关　我在一个window里面嵌套了一个toolbar和一个panel我设置window的autoScroll为true，但是滚动条滚动的时候toolbar就不显示了！我需要在panel里面显示滚动条，求解决方案！------回答---------------其他回答（10分）---------CSS code将toolbar设置成window的对象，不要设置panel的toolbar也可以改变布局方式，window里放一个panel，pan...作者：yuan1238　和相关　我要在页面上面用livegird显示100W条数据,在IE7下面显示都很正常,但是在IE8下把滚动条拉到最下面来，最多只能显示到17-18W条，大家有这样的经历吗,请遇到过的解答哦...谢谢(客户要求不能分页)------回答---------------其他回答（30分）---------崩溃……100万条数据显示一页面上...还真没碰过这样的情况，期待答案------其他回答（10分）---------引用 2 楼 tongbei_...作者：tongbei_stone　和相关　获取GridPanel的总行数.?1. grid.getStore().getCount();??????? //未分页时 , 获取总行数2. grid.getStore().getTotalCount();??? //存在分页时 , 获取总行数3. grid.getView().getRows().? ?grid.getView().getRows() : 返回所有行,这些行不是ExtJS的封装类对象,而是TR元素对象,...作者：明天的昨天　和相关　}