添加div滚动条

@@ -17,13 +17,15 @@
     {{#each sortData}}
         <h3>{{categoryName}}</h3>
         <div class="body" data-value="{{relationParameter.sort}}">
-            <div class="list-body">
-            {{#each sub}}
-            <div class="input-radio" data-value="{{relationParameter.sort}}">
-                {{> icon/radio }}
-                <label>{{categoryName}}</label>
-            </div>
-            {{/each}}
+            <div class="list-body nano">
+                <div class="nano-content">
+                {{#each sub}}
+                    <div class="input-radio" data-value="{{relationParameter.sort}}">
+                        {{> icon/radio }}
+                        <label>{{categoryName}}</label>
+                    </div>
+                {{/each}}
+                </div>
             </div>
         </div>
     {{/each}}
@@ -46,17 +48,19 @@
                 多选 ＋
             </span>
         </div>
-        <div class="brand-list">
-            {{#each brandData}}
-                <div class="input-radio" data-value="{{id}}">
-                    {{> icon/radio}}
-                    {{#if brandNameEn}}
-                        <label>{{brandNameEn}}</label>
-                    {{^}}
-                        <label>{{brandName}}</label>
-                    {{/if}}
-                </div>
-            {{/each}}
+        <div class="brand-list nano">
+            <div class="nano-content">
+                {{#each brandData}}
+                    <div class="input-radio" data-value="{{id}}">
+                        {{> icon/radio}}
+                        {{#if brandNameEn}}
+                            <label>{{brandNameEn}}</label>
+                        {{^}}
+                            <label>{{brandName}}</label>
+                        {{/if}}
+                    </div>
+                {{/each}}
+            </div>
         </div>
         <div class="brand-btns hide">
             <span class="btn disable large confirm">确定</span>
@@ -69,10 +73,10 @@
     <h3>价格</h3>
     <div class="body price-body">
         {{#each priceRange}}
-        <div class="input-radio" data-value="{{lower}},{{higher}}">
-            {{> icon/radio }}
-            <label>¥{{lower}}-¥{{higher}}</label>
-        </div>
+            <div class="input-radio" data-value="{{lower}},{{higher}}">
+                {{> icon/radio }}
+                <label>¥{{lower}}-¥{{higher}}</label>
+            </div>
         {{/each}}
         <div class="price-btns">
             <div class="price-input inline-block">
@@ -92,13 +96,15 @@
 <div class="yoho-ui-accordion">
     <h3>尺码</h3>
     <div class="body">
-        <div class="size-body">
-            {{#each size}}
-            <div class="input-radio" data-value="{{sizeId}}">
-                {{> icon/radio }}
-                <label>{{sizeName}}</label>
+        <div class="size-body nano">
+            <div class="nano-content">
+                {{#each size}}
+                    <div class="input-radio" data-value="{{sizeId}}">
+                        {{> icon/radio }}
+                        <label>{{sizeName}}</label>
+                    </div>
+                {{/each}}
             </div>
-            {{/each}}
         </div>
     </div>
 </div>
@@ -106,13 +112,15 @@
 <div class="yoho-ui-accordion">
     <h3>颜色</h3>
     <div class="body">
-        <div class="color-body">
-            {{#each colors}}
-            <div class="input-radio" data-value="{{id}}">
-                {{> round-color}}
-                <label>{{title}}</label>
+        <div class="color-body nano">
+            <div class="nano-content">
+                {{#each colors}}
+                    <div class="input-radio" data-value="{{id}}">
+                        {{> round-color}}
+                        <label>{{title}}</label>
+                    </div>
+                {{/each}}
             </div>
-            {{/each}}
         </div>
     </div>
 </div>

@@ -101,6 +101,7 @@
     "yoho-jquery": "^1.12.4",
     "yoho-jquery-accordion": "0.0.2",
     "yoho-jquery-lazyload": "^1.9.7",
+    "yoho-jquery-nanoscroller": "0.0.1",
     "yoho-jquery-placeholder": "^2.3.1",
     "yoho-jquery-qrcode": "0.0.3",
     "yoho-slider": "0.0.2"

@@ -12,7 +12,9 @@ var YohoListPage = {
     page: query.page || 1,
     init: function() {
         require('yoho-jquery-accordion');
+        require('yoho-jquery-nanoscroller');
         require('../../plugins/check');
+        $('.nano').nanoScroller();
         $('.yoho-ui-accordion', this.rootDoc).each(function() {
             var opts = {
                 collapsible: true,

 @import "slider";
 @import "tips";
 @import "avatar";
+@import "nanoscroller";

+/** initial setup **/
+.nano {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.nano > .nano-content {
+    position: absolute;
+    overflow: scroll;
+    overflow-x: hidden;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.nano > .nano-content:focus {
+    outline: thin dotted;
+}
+
+.nano > .nano-content::-webkit-scrollbar {
+    display: none;
+}
+
+.has-scrollbar > .nano-content::-webkit-scrollbar {
+    display: block;
+}
+
+.nano > .nano-pane {
+    background: #eee;
+    position: absolute;
+    width: 5px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.nano > .nano-pane > .nano-slider {
+    background: #111;
+    position: relative;
+    margin: 0;
+}
+

@@ -405,3 +405,5 @@
         }
     }
 }
+
+

@@ -24,7 +24,8 @@ shelljs.ls(path.join(__dirname, '/js/**/*.page.js')).forEach((f) => {
         'yoho-jquery',
         'yoho-jquery-lazyload',
         'yoho-slider',
-        'yoho-jquery-accordion'
+        'yoho-jquery-accordion',
+        'yoho-jquery-nanoscroller'
     ];
 });