自定义滚动条样式
3、书写css代码。<style type="text/css">.Scroller-Container { position: absolute; top: 0px; left: 0px; }.Scrollbar-Up { position: absolute; width: 10px; height: 10px; background-color: #CCC; font-size: 0px; }.Scrollbar-Track { width: 10px; height: 160px; position: absolute; top: 20px; background-color: #EEE; }.Scrollbar-Handle { position: absolute; width: 10px; height: 30px; background-color: #CCC; }.Scrollbar-Down { position: absolute; top: 190px; width: 10px; height: 10px; background-color: #CCC; font-size: 0px; }#Scrollbar-Container { position: absolute; top: 50px; left: 460px; }#Container { position: absolute; top: 50px; left: 50px; width: 400px; height: 200px; background-color: #EEE; }#News, #About, #Extra { position: absolute; top: 10px; overflow: hidden; width: 400px; height: 180px; display: none; }#News { display: block; }p { margin: 0; padding: 0px 20px 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-indent: 20px; color: #777; }#Navigation { position: absolute; top: 30px; left: 75px; }#Navigation a { margin: 5px 2px 0 0; padding: 0 5px; height: 20px; background-color: #E4E4E4; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #AAA; text-decoration: none; display: block; float: left; letter-spacing: 1px; }#Navigation a:hover { margin-top: 0px; height: 25px; }#Navigation a.current { margin-top: 0px; height: 25px; background-color: #EEE; color: #777; }</style>
4、书写并添加js代码。<script src="src/jsScroller.js"></script><script src="src/jsScrollbar.js"></script>
5、代码整体结构。
6、查看效果。
