移動端div跟隨滾動條滾動(自制
/*隱藏bady滾動條*/
*::-webkit-scrollbar {
display: none;
}
<div class="p2-content search-box">
//內容盒子 有寬有高 y軸滾動
<div class="content-box" id="search-box-content">
//內容部分
<img class="p2-search-input" data-src="img/p2-search-input.png?v=6" />
</div>
// 自制滾動條
<div class="scallbar-box">
<img class="scallbar" src="img/scallbar.jpg" />
</div>
</div>
gundong($('#search-box-content'))
function gundong(ele){
//計算滾動條高度 滾動距離總長(注意不是滾動條的長度)
var g = ele[0].scrollHeight;
// 盒子本身高度 + 滾動到的當前位置
var m = ele.height()+ele[0].scrollTop;
// 計算百分比
var h = m/g*100
var scallbar = $(ele.parent().find('.scallbar'))
scallbar.css('height', h + '%')
scallbar.css('top', h + '%')
ele.scroll(function () {
m = ele.height()+ele[0].scrollTop;
scallbar.css('top', m/g*100 + '%')
})
}
相關文章
- div滾動條樣式,水平滾動
- 移動端模擬滾動
- div有滾動條 返回頂部
- 解決移動端滾動穿透穿透
- 隱藏滾動條保留滾動效果
- 移動端滾動穿透解決方案穿透
- Vue.js 桌面端自定義滾動條元件|vue美化滾動條VScrollVue.js元件
- 如何讓VB6程式碼編輯器垂直滾動條隨滑鼠滾輪滾動
- css隱藏滾動條並可以滾動CSS
- 移動端點透事件--阻止滾動事件事件
- 移動端頁面滾動--解決方法
- 監聽div滾動高度
- div顯示滾動條(類似合同閱讀)
- 短視訊帶貨原始碼,更改滾動條跟隨手機滑動的速度原始碼
- 移動端滾動穿透問題解決方案穿透
- CSS滾動條美化CSS
- 一個div滾動到底部
- HTML側邊部分內容滑動跟隨 左側跟隨滾動模組程式碼HTML
- 移動端滾動穿透問題完美解決方案穿透
- tbody 滾動條設定
- 表格顯示滾動條
- css隱藏滾動條CSS
- Bootstrap列表新增滾動條boot
- css實現隱藏滾動條並可以滾動內容CSS
- 解決移動裝置上iframe滾動條的問題
- 移動端無限滾動載入 js實現原理JS
- 論移動裝置內容的橫向滾動和豎向滾動
- vue2.x自定義虛擬滾動條|vue美化滾動條元件VscrollVue元件
- element-ui滾動條元件UI元件
- selenium+python 操作滾動條Python
- 超美的滾動條樣式
- bootstrap table 橫向滾動條boot
- Tkinter (17) 滾動條部件 Scrollbar
- H5移動端獲獎無縫滾動動畫實現H5動畫
- RecyclerView滾動位置,滾動速度設定View
- 移動端ios螢幕滾動時filter發生抖動閃爍bugiOSFilter
- 3種方法實現CSS隱藏滾動條並可以滾動內容CSS
- 移動端滾動穿透是什麼原因?有哪些解決方案?穿透