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定义
                    cursor"6px",//像素光标的宽度
                    scrollspeed:80,
                    background:"#555",
                    cursoropacitymin:0.2,
                    cursoropacitymax:1,//改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0
                    enablekeyboard:false,
                    zindex:20000
                });
            }
原文地址:https://www.cnblogs.com/duanzhenzhen/p/11125109.html