jquery的niceScroll沒顯示滾動條

原因一：需要滾動條的標簽使用了絕對布局(position:absolute)，而且z-index>0。

解決辦法：niceScroll({zindex:200});這里設置zindex的值要比標簽的z-index大。

 

原因二：需要滾動條的標簽使用了ajax填充數據。（剛開始沒寫在成功回調中，導致移動端滾動條沒顯示）

解決辦法：將$(selector).niceScroll()放在ajax返回成功的函數里，即在ajax完成時填充數據完成后，在給標簽綁定滾動條。

 

以上原文：https://blog.csdn.net/a1091352041/article/details/41750947 

 

本人遇到一個問題，以上兩種情況都無法解決。在pc端及瀏覽器的手機模擬器上滾動條都顯示，但在手機上經常不顯示（這個頁面是圖片居多，不知道是不是因為圖片太大，網速不好，加載滾動條時圖片還沒加載到一屏以上，導致滾動條顯示不出來。只是猜測，嘗試將圖片切割成多個圖片，但無濟於事）

想到給滾動條加載之前設置定時器，等1-2s后再加載滾動條，效果基本可以。又在滾動條加載之前設置了等待動畫，應該用戶體驗度都稍微好點吧。（因為滾動條加載不出來的情況只在手機上出現，所以設置了小於768px時才添加定時器，否則直接加載滾動條，暫時解決了問題。）

關鍵代碼

$(function(
　　if(document.documentElement.clientWidth < 768){

　　　　setTimeout(setCaseDetailScroll,2000);

 }else{ setCaseDetailScroll(); }

){});

//設置詳情頁滾動條
            function setCaseDetailScroll(){
                $("#caseDetail_inner").getNiceScroll().show();
                $("#caseDetail_inner").getNiceScroll().resize();//重置滾動條大小
                $("#caseDetail_inner").niceScroll({
                    cursorcolor:"#c97b32",//光標顏色
                    cursorborder:"none",// 游標邊框css定義
                    cursorwidth:"6px",//像素光標的寬度
                    scrollspeed:80,
                    background:"#555",
                    cursoropacitymin:0.2,
                    cursoropacitymax:1,//改變不透明度非常光標處於活動狀態（scrollabar“可見”狀態），范圍從1到0
                    enablekeyboard:false,
                    zindex:20000
                });
            }