關於HTML中的捲軸使用技巧分享_HTML/Xhtml_網頁製作

今天學習牛腩新聞發布系統的時候牛腩老師講到了滾動條的一些知識,提到的不多,只涉及到了滾動條的一部分知識,如果想深入研究的話這些是不夠的,還要自己去蒐集一些相關的知識 我說一個現像大家一定常見,就是在網頁中刪除一些東西的時候滾動條往往還在刪除東西之前的位置,而不是非常不人性化的跑到那一頁的頂部,那麼這是怎麼實現的呢?其實辦法很簡單,只需要在.aspx的源碼中的頂端部分加上MaintainScrollPositionOnPostback ="true"即可。見下圖: 以上這個現象就是在學習牛腩新聞發布系統的時候遇到的,下面就給大家來分享一些其他關於html滾動條的使用技巧 (1)隱藏捲軸 (2)如何在單元格或圖層中出現捲軸 (3)javascript改變框架中捲軸的樣式，例如改變顏色、改為平面效果等 BODY {SCROLLBAR-FACE-COLOR: #ffcc99; SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; SCROLLBAR-SHADOW-COLOR: #ffffffff; #000000; SCROLLBAR-ARROW-COLOR: #ff0000; SCROLLBAR-TRACK-COLOR: #dee0ed; SCROLLBAR-DARKSHADOW-COLOR: #ffffff00; 說明：

scrollbar-3dlight-color:color;設定或擷取捲軸顏色； scrollbar-highlight-color:color;設定或擷取捲軸 3D介面的亮邊顏色; scrollbar-face-color:color;設定或擷取捲軸3D表面的顏色； scrollbar-arrow-color:color;設定或檢索捲軸方向箭頭的顏色；當捲軸出現但不可用時，此屬性失效； scrollbar-shadow-color:color;設定或擷取捲軸3D介面的暗邊顏色； scrollbar-darkshadow-color:color;設定或擷取捲軸 暗邊框顏色； scrollbar-base-color:color;設定或擷取捲軸基準顏色。其它介面顏色將據此自動調整。 scrollbar-track-color:color;設定或擷取捲軸的拖曳區域顏色

備註：

color為你要設定的顏色代碼，可以是16進位的，例如#FF0000，可以是以RGB表示的，例如rgb(255,0,255)；設定捲軸樣式的時候不必要把所有的屬性都用上才會生效。 (4)javascript中的頁面元素定位clientX、clientY是滑鼠目前相對於網頁的位置，當滑鼠位於頁面左上角時clientX=0, clientY=0; offsetX、offsetY是滑鼠目前相對於網頁中的某一區域的位置，當滑鼠位於頁面中這一區域的左上角時offsetX=0, offsetY=0; screenX、screenY是滑鼠相對於使用者整個螢幕的位置； x、y是滑鼠目前相對於目前瀏覽器的位置 scrollLeft：設定或取得位於物件左邊界和視窗中目前可見內容的最左端之間的距離（因為有捲軸的產生，所以目前頁面可見內容是不定的）。 scrollTop：設定或取得位於物件最頂端和視窗中可見內容的最頂端之間的距離。 left：物件相對於頁面的X座標。 top：物件相對於頁面的Y座標 (5)屏蔽選擇,右鍵等 下面的這個小範例是實作捲軸根據表單的大小自動設定

複製程式碼 程式碼如下: .TopDIV { 位置：絕對； 左：130px； 頂部：10px; 寬度🎜> 溢出-y：自動； 浮動：右； 邊框樣式：實心； 邊框寬度：; 位置：絕對; 左：10px； 頂部：40px； 寬度：120; 身高：60； 浮動：右； 邊框樣式：實心； 邊框寬度：; 邊框顏色：黃色 🎜> 邊框顏色：黃色 🎜> .Main> 左：130px； 頂部：40px； 寬度：120；; 身高：80； <> 浮動：右； 邊框樣式：實心； 邊框寬度：; 邊框顏色：藍色 } function setStyle() { //145的由來LeftDiv的左寬度15（15是滾動條的寬度） document.getElementById("a").style.width= document. body.clientWidth - 145； //130的由來LeftDiv的左寬度 document.getElementById("c").style.width=document.body.clientWidth - 130; /530;的由來TopDIV的頂部高度15（15是捲軸的寬度） document.getElementById("b").style.height=document.body.clientHeight - 55; //40的由來TopDIV的頂部高度 document.getElementById("c").style.height=document.body.clientHeight - 40; } 1234567890ABCDEFGHIJKLMNOPQRSTUV>; 🎜> 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGHIJKLMNWXYZ 2234567890ABCDEFGHIJKLMNW45613267 4234567890ABCDEFGHIJKLMNOPQRSTUVWXY Z 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 6234567890ABCDEFGHIJKLKLQRSTWUV 8234567890ABCDEFGHIJKLMNOPQRSTUVWXY Z 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 0234567890ABCDEFGHIJKLMNOPQRST 🎜>2234567890ABCDEFGHIJKLMNOPQRSTUVWXY Z

class="MainDIV"> 1234567890ABCDEFGHIJKLMNOPQRSTUVWZZ 4234567890ABCDEFGHIJKLMNOPQRSTUVWXY Z 5234567890ABCDEFGHIJKLXYOPQRSTUV🎜>5234567890ABCDEFGHIJKLXYZQRSTUVWW 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 8234567890ABCDEFGHIJKLKLC156W567 Z 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 2234567890ABCDEFGJ3J +RLUVAftJ +PpUV; >

滾動條的使用是很常見的,它的相關知識也是相當的多,希望自己能在不斷的學習中,不斷的總結,使自己的學習能力和學習效率能有一定的提高.

關於HTML中的捲軸使用技巧分享_HTML/Xhtml_網頁製作

相關文章