<!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=utf-8" /> <title>滚动条</title <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script <style type="text/css">*{margin:0; padding:0;} .wrapper{ width:500px; height:500px; border:1px solid #000; margin:0 auto; } .content{ width:445px; height:400px; overflow:hidden; text-indent:2em;margin:50px 0 0 20px; float:left; line-height:22px;} .track{ width:15px; height:400px; background:#ccc; float:right; margin:50px 10px 0 0 ;} .track .thum{ width:15px; height:30px; background:#eee; cursor:pointer; position:absolute; }</style </head <body> <div class="wrapper"> <div class="content"> <div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美美23 </div </div <div class="track"> <div class="thum"></div </div </div <script type="text/javascript">if($(".content div").height()<400){ $(".track").hide(); }else{ $(".track").show(); } var thumheight=(400/$(".content div").height())*400; $(".thum").height(thumheight); $(".thum").mousedown(function(e){ $(document).bind('selectstart',function( ){ return false;}) var eboj=e||window.event; var y1=eboj.pageY-$(".thum").position().top; $(document).mousemove(function(e){ var eboj=e||window.event; var y2=eboj.pageY-y1; var t=$(".track").offset().top+400-$(".thum").height(); var t1=$(".track").offset().top; var mtop=($(".thum").offset().top-$(".track").offset().top)*$(".content div").height()/400; y2=y2>t?t:y2; y2=y2<t1?t1:y2; $(".thum").css("top",y2); $(".content div").css("margin-top",-mtop); }) $(document).mouseup(function(){ $(document).unbind('mouseup').unbind('mousemove').unbind('selectstart'); }) })</script </body </html 要点:1.点击的时候,禁止文本选中:$(document).bind('selectstart',function(){return false;});
2.拖动的时候,拖动事件加在document上;
3.div滚动的高度/div滚动部分内容的高度=滑块距滚槽顶部的高度/滚槽的高度;
4.解除绑定事件要写在mousedown事件里面;
滚动条
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
下一篇:命名管道--生产者
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏
DIV滚动条设置CSS滚动条显示与滚动条隐藏对div设置滚动条,设置其
css html div+css css样式 上拉 -
table设置tbody滚动条
table tbody { display: block; height: 400px; overflow-y: scroll; } table thead, tbody tr, tfoot tr { displa
css3 html5 html vue.js javascript -
table 滚动条jquery jquery div滚动条
我知道很多人不同意我的观点。但是如果去百度上搜素,与 jQuery 滚动条有关的信息,都是关于滚动条外观和滚动条插件的。我最近在制作一个滚动条相关的页面效果,去 CSDN 论坛里提问,得到了一段代码,还是错误的。
table 滚动条jquery html jQuery javascript -
treeselect底部滚动条 select添加滚动条
在一个网站开发的项目中,提供选项功能的select标签是必不可少的,但我们经常会遇到选项(option)太多以至于其呈现效果不那么友好。于是我们就想到了滚动条,但是怎么样才能自定义条数,当超过条数时出现滚动条这样的效果呢? 网上的答案
treeselect底部滚动条 html select 滚动条 Javascript