nanoScroller顯示滾動條但不滾動

Question

滾動條顯示在實際項目中，但直到在Chrome中單擊「檢查元素」時它才作爲滾動條工作。

我試圖在jsFiddle中創建相同的場景。 （但jsFiddle甚至沒有顯示滾動條，因爲爲.nano指定的高度不起作用）

怎麼了？

$(".nano").nanoScroller({ 
    alwaysVisible: true 
}); 
$(".pane").css("display","block"); 

http://jsfiddle.net/VqN6S/2/

Answer 1

我取消鏈接nanoscroller.css和更換你的CSS：

.nano { width: 380px; height: 100px} 
.nano .content { padding: 10px; text-align: justify;} 
.nano .pane { background: #888} 
.nano .slider { background: #111} 

默認nanoscroller.css一點點修改的內容（注意寬度和高度的不同值。納米級）：

/** initial setup **/ 
.nano { 
    position : relative; 
    width : 300px; 
    height : 100px; 
    overflow : hidden; 
} 
.nano .content { 
    position  : absolute; 
    overflow  : scroll; 
    overflow-x : hidden; 
    top   : 0; 
    right   : 0; 
    bottom  : 0; 
    left   : 0; 
} 
.nano .content:focus { 
    outline: thin dotted; 
} 
.nano .content::-webkit-scrollbar { 
    visibility: hidden; 
} 
.has-scrollbar .content::-webkit-scrollbar { 
    visibility: visible; 
} 
.nano > .pane { 
    background : rgba(0,0,0,.25); 
    position : absolute; 
    width  : 10px; 
    right  : 0; 
    top  : 0; 
    bottom  : 0; 
    visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ 
    opacity : .01; 
    -webkit-transition : .2s; 
    -moz-transition  : .2s; 
    -o-transition   : .2s; 
    transition   : .2s; 
    -moz-border-radius : 5px; 
    -webkit-border-radius : 5px; 
    border-radius   : 5px; 
} 
.nano > .pane > .slider { 
    background: #444; 
    background: rgba(0,0,0,.5); 
    position    : relative; 
    margin    : 0 1px; 
    -moz-border-radius : 3px; 
    -webkit-border-radius : 3px; 
    border-radius   : 3px; 
} 
.nano:hover > .pane, .pane.active, .pane.flashed { 
    visibility : visible\9; /* Target only IE7 and IE8 with this hack */ 
    opacity : 0.99; 
} 

您可以在此查看結果; http://jsfiddle.net/MxCtr/1/

所以，看來，問題在你的CSS。