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
                });
            }