JScrollPane的使用

時間 2019-11-11

標籤 jscrollpane 使用简体版

原文原文鏈接

概述

jScrollPane.js是一個輕量級的滑塊插件, 很是方便使用. 在前端工業界(寫頁面)使用很是普遍, 下面我記錄下用法, 供之後開發時參考, 相信對其餘人也有用.javascript

PS: 想起以前我用impress.js寫了一個PPT, 當時以爲有多了不得, 如今用的插件一多, 就以爲之前真是可笑, impress.js也就是一個通常的插件罷了...css

不用jScrollPane.js

先來看看不用jScrollPane.js, 給一個wrap設定高度, 再給這個wrap加上內容, 內容的高度大於wrap的高度, 會發生什麼?html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .scroller {
        width: 240px;
        height: 140px;
        background-color: #666;
    }
    .app {
        width: 240px;
        height: 140px;
        background-color: green;
    }
    <style>
  </head>
  <body>
    <div class="scroller" style="">
        <p>我知道我是一個沒車沒房得人，顏值仍是那麼低，也不說話。</p>
        <p>我不敢靠近你，這就是理由</p>
        <p>等到我靠近你，才發現我，喜歡上你了。</p>
        <p> 等我想真正得追你得時候，才發現已經晚了</p>
        <p>不知道還有沒有機會，成爲你得另外一半了。</p>
        <p>陪伴到老</p>
    </div>
    <div class="app"></div>
  </body>
</html>

能夠看到, scroller元素裏面的內容超出了它的範圍而且伸到外面去了.前端

使用overflow

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .scroller {
        width: 240px;
        height: 140px;
        background-color: #666;
        overflow: scroll;
    }
    .app {
        width: 240px;
        height: 140px;
        background-color: green;
    }
    <style>
  </head>
  <body>
    <div class="scroller" style="">
        <p>我知道我是一個沒車沒房得人，顏值仍是那麼低，也不說話。</p>
        <p>我不敢靠近你，這就是理由</p>
        <p>等到我靠近你，才發現我，喜歡上你了。</p>
        <p> 等我想真正得追你得時候，才發現已經晚了</p>
        <p>不知道還有沒有機會，成爲你得另外一半了。</p>
        <p>陪伴到老</p>
    </div>
    <div class="app"></div>
  </body>
</html>

能夠看到, 只用css就給scroller元素加了一個滾動條, 不過這個滾動條是系統自帶的滾動條. 若是要自定義滾動條的話, 可使用jScrollPane.js.(注意, 須要和jquery一塊兒使用.)java

使用jScrollPane.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <link href="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/style/jquery.jscrollpane.css" rel="stylesheet">
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .scroller {
        width: 240px;
        height: 140px;
        background-color: #666;
        overflow: scroll;
    }
    .app {
        width: 240px;
        height: 140px;
        background-color: green;
    }
    </style>
</head>
    <body>
    <div class="scroller" style="">
        <p>我知道我是一個沒車沒房得人，顏值仍是那麼低，也不說話。</p>
        <p>我不敢靠近你，這就是理由</p>
        <p>等到我靠近你，才發現我，喜歡上你了。</p>
        <p> 等我想真正得追你得時候，才發現已經晚了</p>
        <p>不知道還有沒有機會，成爲你得另外一半了。</p>
        <p>陪伴到老</p>
    </div>
    <div class="app"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/script/jquery.jscrollpane.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.scroller').jScrollPane();
        });
    </script>
    </body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <link href="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/style/jquery.jscrollpane.css" rel="stylesheet">
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .scroller {
        width: 240px;
        height: 140px;
        background-color: #666;
        overflow: scroll;
    }
    .app {
        width: 240px;
        height: 140px;
        background-color: green;
    }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/script/jquery.jscrollpane.js"></script>
    <script type="text/javascript">
        $(function() {
            $('.scroller').jScrollPane();
        });
    </script>
</head>
    <body>
    <div class="scroller" style="">
        <p>我知道我是一個沒車沒房得人，顏值仍是那麼低，也不說話。</p>
        <p>我不敢靠近你，這就是理由</p>
        <p>等到我靠近你，才發現我，喜歡上你了。</p>
        <p> 等我想真正得追你得時候，才發現已經晚了</p>
        <p>不知道還有沒有機會，成爲你得另外一半了。</p>
        <p>陪伴到老</p>
    </div>
    <div class="app"></div>
    </body>
</html>

能夠看到,自定義了一個滾動條, jScrollPane還有許多其它的參數配置, 這些參數配置纔是它真正的強大之處. 在此就不介紹了, 自行百度~jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。