首先說一下自定義滾動條的乙個要求：滑鼠滾動在它div上滾動時，如果沒有滾到頂端或底部則不能影響頁面滾動條和系統自帶一樣
讓乙個div擁有滾動條
1、只有垂直滾動條
#mydiv1
2、只有水平滾動條
#mydiv2
3、有垂直和水平滾動條
#mydiv3
在自定義滾動條時我們可以隱藏原來的滾動條，但我們不宜使用下面這種方式：
#mydiv3
如果使用這種方式不好實現用滑鼠滾動div時而不滾動頁面，且需要靠js**控制滾動。
我認為好的方案是：
保留它原來的滾動條，然後用其它div遮蓋或剪裁掉它的滾動條，這種方式可以使用系統自帶的滑鼠滾輪滾動div內容，而且不會再滾動div內容時滾動整個頁面。
比如我們要自定義div的垂直滾動條可以用以下方式隱藏原來的
方式1（不太理想的方式）
div1">這種方式有以下缺點：div2">
要滾動的內容
1、我們需要獲取瀏覽器滾動條寬度才好準確的只隱藏
div2的滾動條，我們這裡設定
div2的寬度比它外部
div1的寬度多20px,通過div1來剪裁了它超出100px的部分，這只適用於滾動條寬度為20px的情況。
2、 div2內容寬度小於
div2在樣式裡設定的寬度。
方式2：（個人覺得好的方式）
1、用乙個div
(div1)包住
有內容的div
(div2)，使用
div1滾動
div2（滾動條是
div1的）,
div1的寬度大於
div2的寬度（
div1的寬度 -
div2的寬度 >= 瀏覽器滾動條寬度）
2、用另乙個div包住地
div1，寬度和
div2的寬度一樣，用於把
div1系統自帶滾動條隱藏,高度和
div1一樣
這樣我們就實現了看不見滾動條卻可以滾動內容的div，後面實現自己的滾動條就行了
下面是我寫的乙個例子，不過加了js來控制滾動，主要為了有手機滾屏那種緩慢停止的效果，用js
window.getselection ? window.getselection().removeallranges() : document.selection.empty();防止選中內容
**
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容要滾動的內容
其它內容 || |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
自定義滾動LinearLayout（垂直）
1.宣告 第一次寫部落格好緊張呀！最近在發現寫linearlayout好多頁面乙個手機上剛剛好滿屏，換乙個手機就回出現底部有一部分布局看不到完整布局，第乙個想到就是在外面套一層scrollview，一下子就解決問題，但是每次都要套一層布局感覺麻煩了，而且套一層布局，如果布局有顏色或者半透明的話，那麼...
html自定義滾動條
treeview treeview hover treeview webkit scrollbar 定義滾動條軌道 內陰影 圓角 treeview webkit scrollbar thumb 定義滾動條軌道 內陰影 圓角 treeview webkit scrollbar track 滾動條兩端的...
HTML自定義滾動條
它是使用css中的偽元素來實現的，主要由以下三個來完成 1.webkit scrollbar 定義滾動條的樣式，如長寬。2.webkit scrollbar thumb 定義滾動條上滑塊的樣式。3.webkit scrollbar track 定義滾動條主幹部分 背景 的樣式。nui scroll ...