Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- nanoScroller.js v0.8.7 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/css/nanoscroller.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.7/javascripts/jquery.nanoscroller.min.js"></script>
</head>
<body>
    <div class="example nano">
        <div class="nano-content">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>
        </div>
    </div>
    <style>
        .example { 
            background: #efefef;
            width: 240px;
            height: 120px; /* 自訂高度 */
        }
        .example > .nano-pane  { background: #aaa;  /* 自訂scrollbar背景色 */ }
        .example > .nano-pane > .nano-slider { background: #333;  /* 自訂scrollbar顏色 */ }
    </style>
    <script type="text/javascript">
        $( ".example" ).nanoScroller({
            // 參數設定[註1]
            iOSNativeScrolling: false, // 遇到iOS系統時隱藏nanoScroller，使用原生的iOS的滾輪(iOS 5+)
            sliderMinHeight: 20, // nanoScroller的最小高度
            sliderMaxHeight: null, // nanoScroller的最大高度
            preventPageScrolling: false, // 當nanoScroller滾輪滾動到最上面或最下面時，停止影響外層的頁面繼續滾動
            disableResize: false, // 禁止nanoScroller滾輪調整尺寸
            alwaysVisible: false, // 永遠顯示nanoScroller
            flashDelay: 1500, // 快閃模式，自動隱藏nanoScroller的時間(單位：毫秒)
            paneClass: "nano-pane", // nanoScroller軌道的類別名稱
            sliderClass: "nano-slider", // nanoScroller滾輪的類別名稱
            contentClass: "nano-content", // nanoScroller內容的類別名稱
            enabledClass: "__enabled", // nanoScroller啟動的類別名稱
            flashedClass: "__flashed", // 快閃模式的類別名稱
            activeClass: "__active", // nanoScroller滾輪進行中的類別名稱
            tabIndex: -1 // contentClass指定的目標的tabIndex屬性
        });
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers