自定義滾動條樣式

自定義滾動條樣式

工具/原料

adobe dreamweaver

方法/步驟

新建html文檔。

書寫hmtl代碼。<div id="Navigation"> <a href="#" onclick="return swapIt(this)" title="News" class="current">news</a> <a href="#" onclick="return swapIt(this)" title="About">about</a> <a href="#" onclick="return swapIt(this)" title="Extra">extra</a> </div><div id="Container"> <div id="News">  <div class="Scroller-Container">   <p>Lorem ips<br />a. Class ap<br />and<br />ri<br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /></p>   <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>   <p><br />um a<br /><br /><br />um a<br /><br />in feug<br />um a<br /><br />iat<br />um a<br /><br /> ultr<br />um a<br /><br />icies du<br />um a<br /><br />i. S<br />um a<br /><br />uspen<br />um a<br /><br /></p>  </div> </div> <div id="About">  <div class="Scroller-Container">   <p>Lorem ips<br />a. Class ap<br />and<br />ri<br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /></p>   <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>   <p><br />um a<br /><br /><br />um a<br /><br />in feug<br />um a<br /><br />iat<br />um a<br /><br /> ultr<br />um a<br /><br />icies du<br />um a<br /><br />i. S<br />um a<br /><br />uspen<br />um a<br /><br /></p>  </div> </div> <div id="Extra">  <div class="Scroller-Container">   <p>Lorem ips<br />a. Class ap<br />and<br />ri<br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /><br />um a<br /><br /></p>   <p>Vivamus vehicula. Integer cursus massa et nisl. Morbi pretium sem eget risus. Vestibulum nec est. Donec feugiat purus et ligula. Quisque semper. Sed eu ante. Curabitur suscipit porttitor libero. Nam eros leo, sollicitudin eget, tincidunt vitae, facilisis a, dui. Proin neque. Aliquam erat volutpat. Pellentesque felis.</p>   <p><br />um a<br /><br /><br />um a<br /><br />in feug<br />um a<br /><br />iat<br />um a<br /><br /> ultr<br />um a<br /><br />icies du<br />um a<br /><br />i. S<br />um a<br /><br />uspen<br />um a<br /><br /></p>  </div> </div></div><div id="Scrollbar-Container"> <div class="Scrollbar-Up"></div> <div class="Scrollbar-Down"></div> <div class="Scrollbar-Track">  <div class="Scrollbar-Handle"></div> </div></div>

書寫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>

書寫並添加js代碼。<script src="src/jsScroller.js"></script><script src="src/jsScrollbar.js"></script>

代碼整體結構。

查看效果。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場