原生JS實現滾動條

来源:https://www.cnblogs.com/fanzhikang/archive/2019/08/25/11406983.html
-Advertisement-
Play Games

原生JS模擬滾動條 求滾動條的高度   可視內容區的高度 / 內容區的實際高度 = 滾動條的高度 / 滑道的高度 求內容區top的值   內容區距離頂部的距離 / (內容區的實際高度 可視內容區域的高度 ) = 滾動條距離頂部的距離 / ( 滑道的高度 滾動條的高度) 使用onm ...


原生JS模擬滾動條

  • 求滾動條的高度

      可視內容區的高度 / 內容區的實際高度 = 滾動條的高度 / 滑道的高度

  • 求內容區top的值

      內容區距離頂部的距離 / (內容區的實際高度 - 可視內容區域的高度 ) = 滾動條距離頂部的距離 / ( 滑道的高度 - 滾動條的高度)

  • 使用onmousewheel做好相容處理

     document.onmousewheel = function (e){
        //    e.wheelDelta < 0 //(-120)  向下
        //    e.wheelDelta > 0 //(120)  向上
        }
    //相容  Firefox 
    document.addEventListener('DOMMouseScroll',function (e) {
            // e.detail > 0  //(3)  滑輪向下滾動
            // e.detail < 0  //(-3)  滑輪向上滾動
        },false)
  • 滾動條的運動方向跟內容區的運動方向相反

    • 當滾輪向上運動時 --> 內容區向下運動

    • 當滾輪向下運動時 --> 內容區向上運動

  • 舉個例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動條</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    .wrapper{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
        width: 800px;
        height: 700px;
        border: 1px solid #000;
    }
    .view_box{
        position: absolute;
        left: 100px;
        top:50%;
        transform: translateY(-50%);
        width:600px;
        height: 500px;
        background-color: rgba(25, 25, 25,.7);
        overflow: hidden;
    }
    .content{
        position: absolute;
        top: 0;
        width: 100%;
        background-color: #abcdef;
        transition: all 0.016s linear;

    }
    .content div{
        height: 100px;
        background-color: #f40;
    }
    .bar_box{
        position: absolute;
        right: 90px;
        top:50%;
        transform: translateY(-50%);
        height: 500px;
        width: 4px;
        border-radius: 2px;
        background-color: rgba(25, 25, 25,.7);
        overflow: hidden;
    }
    .bar{
        position: absolute;
        top:0;
        height: 20px;
        width: 100%;
        border-radius:2px; 
        background-color: rgb(197, 179, 179);
        transition: all 0.016s linear;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="view_box">
            <div class="content">
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
               <div>這是內容</div>
            </div>
        </div>
        <div class="bar_box">
            <div class="bar"></div>
        </div>
    </div>

    <script>
        
        var wrapper = document.getElementsByClassName('wrapper')[0];
        //獲取展示內容區的區域
        var view_box = document.getElementsByClassName('view_box')[0];
        //獲取展示內容區的區域的大小
        var view_box_height = view_box.offsetHeight;
        //獲取內容區
        var content = document.getElementsByClassName('content')[0];
        //獲取內容區的實際高度
        var content_height = content.offsetHeight;
        //獲取滑道
        var bar_box = document.getElementsByClassName('bar_box')[0];
        //獲取滑道的高度
        var bar_box_height = bar_box.offsetHeight;
        //獲取滾動條
        var bar = document.getElementsByClassName('bar')[0];
        
        //求 滾動條的高度

        //當展示的內容區的大小剛好展示內容區域時,滾動條的高度就是滑道的高度
        if(view_box_height / content_height < 1) {
            bar.style.height = (view_box_height / content_height) * bar_box_height + 'px';
        } else {
            bar.style.height = bar_box_height + 'px';
        }

        //綁定事件(做相容處理)
        wrapper.onmousewheel = function (e){
        //    e.wheelDelta < 0 //(-120)  向下
        //    e.wheelDelta > 0 //(120)  向上
        scrollRoll(e);
        }
        //相容  Firefox 
        wrapper.addEventListener('DOMMouseScroll',function (e) {
            // e.detail > 0  //(3)  滑輪向下滾動
            // e.detail < 0  //(-3)  滑輪向上滾動
            scrollRoll(e);
        },false)


        function scrollRoll (e) {
            e = e || window.event;
            if (e.detail > 0) {
                down();
            } else if (e.detail < 0) {
                up();
            }

            if (e.wheelDelta > 0) {
                up();
            } else if (e.wheelDelta < 0) {
                down();
            }
        }
        //滑輪向下滾動
        function down () {
            var speed = 8;
            if (bar.offsetTop >= bar_box_height - bar.offsetHeight) {
                bar.style.top = bar_box_height - bar.offsetHeight + 'px';
                //註意:內容區應該向上移動
                content.style.top = - (content_height - view_box_height) + 'px';
            } else {
                bar.style.top = bar.offsetTop + speed + 'px';
                content.style.top = - bar.offsetTop / (bar_box_height - bar.offsetHeight) * (content_height - view_box_height) + 'px';
            }
        }
        //滑輪向上滾動
        function up () {
            var speed = 8;
            if (bar.offsetTop <= 0) {
                bar.style.top = 0 + 'px';
                content.style.top = 0 + 'px';
            } else {
                bar.style.top = bar.offsetTop - speed + 'px';
                content.style.top = - bar.offsetTop / (bar_box_height - bar.offsetHeight) * (content_height - view_box_height) + 'px';
            }
        }
   </script>
</body>
</html>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • React 中 setState()詳細解讀 對於 setState() 相信伙伴們都用過,它是 React 官方推薦用來更新組件 state 的 API,但是對於 setState() 你真的瞭解嗎?且待我慢慢詳聊一番。 setState() 官方用法指南 語法1: updater:函數類型,返回 ...
  • js中\=\=和\=\=\=區別 簡單來說: \=\= 代表相同, \=\=\=代表嚴格相同, 為啥這麼說呢, 這麼理解: 當進行雙等號比較時候: 先檢查兩個操作數數據類型,如果相同, 則進行\=\=\=比較, 如果不同, 則願意為你進行一次類型轉換, 轉換成相同類型後再進行比較, 而===比較時, ...
  • jQuery跳轉到另一個頁面 1.我們可以利用http的重定向來跳轉 window.location.replace(" "https://www.cnblogs.com/pythonywy/" "); 2.使用href來跳轉 window.location.href = " "https://ww ...
  • html 基礎標簽 單標簽 1.註釋標簽: <! 註釋信息 看不到 ctrl+/ <! 網頁頭部導航盒子 換行標簽: 橫線標簽: 標題標簽: 段落標簽: 表示強調標簽: 文字 屬性:文字加顏色 color:改變文字顏色 size:改文字大小屬性 例如:文字 文本加粗顯示:或者 文字斜體顯示: 或 下 ...
  • django搭建BBS 登入&驗證碼的生成 文件結構 app 介面 migrations _\_inint\_\_.py admin.py apps.py bbsform.py models.py tests.py views.py avatar BBS \_\_inint\_\_.py setti ...
  • //這裡使用的是本地的資源文件,如果需要使用,請將代碼內的資源文件用CDN引入 ...
  • 生命不息,探索不止。通過回顧360搜索彩蛋開發方式的發展歷程,我們可以看到相關人員通過不斷努力地探索更加自動和智能的開發方式來解決工作中遇到的種種繁複的工作,從而有效降低成本,提高需求的落地效率。彩蛋開發方式的發展歷程只是你我在工作道路上的一個小小的縮影,我自認為這種探索精神應該滲透到一切項目的迭代... ...
  • 在這裡講一講這個案例的實現思路吧(個人見解)。。核心思想:為防止頁面刷新時倒計時失效的解決方案是:當每次刷新一次頁面時都執行一個函數 即下麵講到的 setStyle() 函數。這個函數會根據當前的 cookie 值判斷 是否處於倒計時階段 ,因為 cookie 值不會隨著 網頁的刷新而改變。 最後面 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...