快捷導(dǎo)航

js模擬滾動條(橫向豎向)

更新時間：2013年02月22日 13:43:21 投稿：shangke

js模擬滾動條(橫向豎向)，需要的朋友可以參考一下

JS：

HTML:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
        * { margin:0; padding:0;}
        body {font-size:12px; line-height:1.5;}
        #scrollTest {background:#fff;padding:10px;width:1000px;}
        .sky_warpper { margin:100px auto;background:red;}
        .sky_scrollTopOuter {width:7px;background:#ddd;opacity:0.3;}
        .sky_scrollTopOuter:hover {opacity:0.8;width:7px;-webkit-transition:opacity,width 0.3s ease-out;}
        .sky_scrollTop { background:#333;opacity:0.3;width:7px;-webkit-border-radius:5px;-webkit-transition:opacity,width 0.3s ease-out; cursor:default;}
        .sky_warpper:hover .sky_scrollTop { opacity:0.8;width:7px;-webkit-transition:opacity,width 0.3s ease-out;}

        .sky_scrollLeftOuter {height:7px;background:#ddd;opacity:0.3;}
        .sky_scrollLeftOuter:hover {opacity:0.8;height:7px;-webkit-transition:opacity,height 0.3s ease-out;}
        .sky_scrollLeft { background:#333;opacity:0.3;height:7px;-webkit-border-radius:5px;-webkit-transition:opacity,height 0.3s ease-out; cursor:default;}
        .sky_warpper:hover .sky_scrollLeft { opacity:0.8;height:7px;-webkit-transition:opacity,height 0.3s ease-out;}
    </style>
</head>
<body>
    <input type="button" id="addSt" value="添加豎向滾動條" />
    <input type="button" id="addSl" value="添加橫向滾動條" />
    <input type="button" id="delSt" value="刪除豎向滾動條" />
    <input type="button" id="delSl" value="刪除橫向滾動條" />
    <input type="button" id="add" value="增加內(nèi)容" />
    <input type="button" id="setTop" value="設(shè)置上邊距離" />
    <input type="button" id="setLeft" value="設(shè)置左邊距離" />
    <div id="scrollTest">
        111111111111111111111111111111譯者按 IE 曾是 web 創(chuàng)新的先驅(qū)，但最近幾年因為對 web 標(biāo)準(zhǔn)的支持落后于其他瀏覽器以及低版本 IE 的各種 bug 而被人詬病。雅虎的 Nicholas C. Zakas 帶我們回顧了 IE 在 web 發(fā)展過程中扮演的輝煌角色，讓我們能以一個更客觀的眼光來看待 IE。看完這篇文章，也許大家都會對 IE 瀏覽器有一定的改觀，這也是我翻譯這篇文章的目的。

譯文

在 Internet Explorer 成為大家都恨之入骨的瀏覽器的很久以前，它曾是整個互聯(lián)網(wǎng)的創(chuàng)新驅(qū)動力。有時候我們很難記得那些在 IE 6 成為全世界 web 開發(fā)者的災(zāi)難之前 IE 所作的貢獻。不管你信不信，正因為有了 IE 4—6，才會有我們現(xiàn)在所知的 web 開發(fā)。IE 的一些獨特的功能過去就曾是事實標(biāo)準(zhǔn)，后來成為了官方標(biāo)準(zhǔn)最終進入了 HTML5 規(guī)范。人們也許很難相信，對于我們現(xiàn)在認(rèn)為理所應(yīng)當(dāng)?shù)墓δ苤杏泻艽笠徊糠侄紤?yīng)該要想到 IE，但快速地回顧一下歷史可以讓我們知道的確如此。

DOM

如果 IE 是一個人人都痛恨的瀏覽器，那么「文檔對象模型」（DOM）就是人人都痛恨的 API 了。你可以說 DOM 過于繁瑣、不適合 JavaScript 甚至是有些荒謬，而且這些也都沒錯。然而，DOM 還是給了開發(fā)者通過 JavaScript 來訪問網(wǎng)頁的每個部分的途徑。曾經(jīng)你一度只能通過 JavaScript 訪問頁面中某些特定的元素。IE 3 和 Netscape 3 只允許程序訪問表單元素、圖片以及鏈接。Netscape 4 改進了這一點，把程序可訪問的范圍通過 document.layers 擴展到了它特有的 layer 元素。IE 4 作了進一步改進，把這個范圍通過 document.all 擴展到了頁面的所有元素。

從很多方面來說，document.all 算是 document.getElementById() 的最初版本。你還是要使用元素的 ID 來通過 document.all 訪問它，例如 document.all.myDiv 或是 document.all["myDiv"]。最主要的區(qū)別就是 IE 使用了一個集合而非方法，而這和其他當(dāng)時的訪問方法比如 document.images 及 document.forms 是相吻合的。

IE 4 也第一個引入了用 document.all.tags() 來通過標(biāo)簽名字獲取一個元素列表的功能。無論從哪點來看，這都是 document.getElementsByTagName() 的最初版本，而且工作方式完全相同。如果你想獲取所有的 div 元素，你可以使用 document.all.tags("div")。甚至在 IE 9 中，這個方法仍然作為 document.getElementsByTagName() 的一個別名存在。

IE 4 同時也為我們引入了可能是有史以來最流行的私有 DOM 擴展：innerHTML?？雌饋砦④浀哪菐腿耸钦J(rèn)識到了通過編程手段來建立一個 DOM 有多么痛苦，所以把這個便捷方法，連同 outerHTML 一起提供給我們。事實證明這兩個方法都非常有用，已經(jīng)在 HTML5 中被標(biāo)準(zhǔn)化了[1]。隨它們一同而來的用來處理純文本的 API——innerText 以及 outerText——同樣被證明足夠有影響力，因為 DOM Level 3 已經(jīng)引入了與 innerText 行為相似的 textContent[2]。

按照同樣的思路，IE 4 引入了 insertAdjacentHTML()，這是又一種將 HTML 文檔中的方法。雖然這花了更長的時間，但最終也被編入了 HTML5[3]，而且目前已被各瀏覽器廣泛支持。

事件

在開始時，JavaScript 并沒有事件機制。網(wǎng)景和微軟都作出了嘗試，并且分別得出了不同的模型。網(wǎng)景給我們帶來了事件捕獲，其思想是一個事件先發(fā)送到窗口，然后是文檔，然后一個個直到最終到達預(yù)期的目標(biāo)。網(wǎng)景瀏覽器 6 以前的版本都僅支持事件捕獲。

微軟采取了一個相反的方法，設(shè)計出了事件冒泡。他們認(rèn)為一個事件應(yīng)該先從實際的目標(biāo)出發(fā)，然后在上層節(jié)點觸發(fā)直到文檔。IE 9 以前的瀏覽器僅支持事件冒泡。雖然隨著官方的 DOM 事件規(guī)范發(fā)展，同時包含了事件捕獲和事件冒泡，但大多數(shù) web 開發(fā)者都只使用事件冒泡，而把事件捕獲僅僅留在 JavaScript 類庫中的一些解決方案和小技巧中使用。

除了創(chuàng)造了事件冒泡以外，微軟還創(chuàng)造了一系列后來也最終被標(biāo)準(zhǔn)化的額外事件：

contextmenu – 當(dāng)使用鼠標(biāo)副按鍵點擊一個元素時觸發(fā)。在 IE 5 中首次出現(xiàn)，后來被編入了 HTML5[4]?，F(xiàn)在已被所有主流瀏覽器所支持。
beforeunload – 在 unload 事件前觸發(fā)，允許你阻斷頁面的退出。最初由 IE 4 引入，現(xiàn)在也為 HTML5 的一部分[4]。
mousewheel – 在鼠標(biāo)滾輪（或類似設(shè)備）被使用時觸發(fā)。首個支持此事件的瀏覽器是 IE 6。就像其他一樣，目前也是 HTML5 的一部分[4]。唯一不支持此事件的主流桌面瀏覽器是 Firefox（但其支持一個可用來替代的 DOMMouseScroll 事件）。
mouseenter – mouseover 的非冒泡版本，被微軟在 IE 5 中引入，用來克服 mouseover 使用時帶來的困擾。這個事件已被 DOM Level 3 事件規(guī)范正規(guī)化[5]。同樣被 Firefox 及 Opera 支持，但 Safari 和 Chrome 都（暫時？）不支持。
mouseleave – 與 mouseenter 對應(yīng)的 mouseout 的非冒泡版本。在 IE 5 中被引入，目前被 DOM Level 3 事件規(guī)范標(biāo)準(zhǔn)化[6]。瀏覽器支持和 mouseenter 一樣。
focusin – focus 事件的冒泡版本，用來幫助更好地管理頁面上的聚焦行為。最初在 IE 6 中被引入，現(xiàn)在已成為 DOM Level 3 事件規(guī)范的一部分[7]。目前沒有被很好地支持，盡管 Firefox 關(guān)于其實現(xiàn)的開過一個 bug。
focusout – blur 事件的冒泡版本，用來幫助更好地管理頁面上的聚焦行為。最初在 IE 6 中被引入，現(xiàn)在已成為 DOM Level 3 事件規(guī)范的一部分[8]。和 focusin 一樣，沒有良好支持但 Firefox 接近了。
XML 與 Ajax
盡管 XML 已經(jīng)像很多人所料的那樣在現(xiàn)今的 web 上被大量使用，但是對 XML 進行支持的領(lǐng)路人仍然是 IE。它是第一個支持在客戶端通過 JavaScript 進行 XML 解析以及 XSLT 變換的瀏覽器。不幸的是，它是通過 ActiveX 對象來表示 XML 文檔以及 XSLT 處理器的。但 Mozilla 的人顯然認(rèn)識到了其中的可取之處，因為他們后來用 DOMParser、XMLSerializer 和 XSLTProcessor 創(chuàng)造了類似的功能。其中前兩個已經(jīng)成為了 HTML5 的一部分[9]。雖然基于標(biāo)準(zhǔn)的 JavaScript XML 處理方式和 IE 提供的版本差異較大，但它無疑是深受 IE 影響的。

客戶端的 XML 處理都都是 IE 對 XMLHttpRequest 的實現(xiàn)的一部分，最開始由 IE 5 以 ActiveX 對象的形式引入。其中的想法是希望可以在一個網(wǎng)頁中從服務(wù)器獲取一個 XML 文檔并且允許用 JavaScript 把這個 XML 當(dāng)做 DOM 來進行處理。IE 的版本需要你使用 new ActiveXObject("MSXML2.XMLHttp")，這也使得它依賴于版本字符串，而且讓開發(fā)者要費盡功夫去測試、使用最新版本。再一次，F(xiàn)irefox 站出來，通過創(chuàng)建一個當(dāng)時還是私有的、與 IE 版本接口完全同名的 XMLHttpRequest 對象來清理這一片混亂。此后其他瀏覽器復(fù)制了 Firefox 的實現(xiàn)，最終使得 IE 7 也增加了一個不需要使用 ActiveX 的版本。當(dāng)然，使得每個人為 JavaScript 感到振奮的 Ajax 背后的驅(qū)動力正是 XMLHttpRequest。<br/><br/>
    </div>
    <script src="skyScroll2.js"></script>
    <script>
        var a = skyScroll({
            target:'scrollTest'
        });
        var add = document.getElementById('add');
        var scrollTest = document.getElementById('scrollTest');
        var setTop = document.getElementById('setTop');
        var setLeft = document.getElementById('setLeft');
        var addSt = document.getElementById('addSt');
        var addSl = document.getElementById('addSl');
        var delSt = document.getElementById('delSt');
        var delSl = document.getElementById('delSl');
        add.onclick = function(){
            var w = scrollTest.offsetWidth;
            scrollTest.innerHTML += scrollTest.innerHTML;
            a.recalculated();
        };
        setTop.onclick = function(){
            a.set({top:200});
        }
        setLeft.onclick = function(){
            a.set({left:300});
        }
        addSt.onclick = function(){
            a.addVscroll();
        };
        addSl.onclick = function(){
            a.addLscroll();
        };
        delSt.onclick = function(){
            a.delVscroll();
        }
        delSl.onclick = function(){
            a.delLscroll();
        }
    </script>
</body>
</html>

效果圖：