移動端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 + '%')
})
}
相關文章
- 隨滾動條移動的層
- 原生JS控制多個滾動條同步跟隨滾動JS
- div滾動條樣式,水平滾動
- 拖動滾動條實現div跟隨效果程式碼例項
- 設定div滾動條
- 移動端模擬滾動
- div有滾動條 返回頂部
- 解決移動端滾動穿透穿透
- 跟隨滾動條漂浮的返回頂部按鈕效果
- 隱藏滾動條保留滾動效果
- 實現隨著滾動條滾動,導航會自動切換的效果
- 移動端滾動穿透解決方案穿透
- 如何讓VB6程式碼編輯器垂直滾動條隨滑鼠滾輪滾動
- css隱藏滾動條並可以滾動CSS
- scrollable滾動條向下滾動至底部
- .NET GridView使用滾動條(通過<div>)View
- Vue.js 桌面端自定義滾動條元件|vue美化滾動條VScrollVue.js元件
- 移動端點透事件--阻止滾動事件事件
- 移動端頁面滾動--解決方法
- 禁止蒙層底部頁面跟隨滾動
- 移動端觸屏拖動頁面滾動效果
- 監聽div滾動高度
- iOS:導航條滾動透明度隨著tableView的滾動而變化iOSView
- 短視訊帶貨原始碼,更改滾動條跟隨手機滑動的速度原始碼
- 移動端滾動穿透問題解決方案穿透
- 如何解決移動端滾動穿透問題穿透
- div顯示滾動條(類似合同閱讀)
- CSS滾動條美化CSS
- 自定義滾動條
- list滾動條向下
- 移動端滾動穿透問題完美解決方案穿透
- 移動端實現內滾動的4種方案
- css隱藏滾動條CSS
- tbody 滾動條設定
- Bootstrap列表新增滾動條boot
- 表格顯示滾動條
- 按鈕滾動條效果
- table設定滾動條