jquery.nicescroll页面初始化无滚动条，等到撑开到应该出现滚动条的时候还是不出现，纠结了，请大神

Posted 2023-04-19

有使用过jquery.nicescroll滚动条插件的大神吗，特么的公司项目为了滚动条在不同平台下样式统一，愣是要自己定义滚动条的样式，在网上找了好多插件，最后选择了这个nicescroll，这个插件页面加载完成后调用.niceScroll();方法，如果当前页面内容少不足以显示滚动条的时候它不会显示滚动条，但是如果要是有动态添加内容多了的情况下他滚动条也不会出现，找了一天了，没搞清楚什么原因，
比如我默认页面的table是2行，这个时候没有滚动条，但是如果我动态添加到20行了它还是不出现滚动条就是可以看见2行，其余的在页面下方，没有滚动条拉不上来。

这种情况一般使用resize进行监听，高度改变后重新计算滚动条的参数 参考技术A 我去看了一下这源码,我觉得应该是动态内容原因造成的,插件计算时没考虑内容的动态更新,如果可以的话,请贴你的关键代码出来,或者可以给你一些建议
nicescroll.areaaperta.com/js/jquery.nicescroll.plus.js追问

http://areaaperta.com/nicescroll这个是这个插件的官网，那个问题我已经解决了，我之前用嘎的nicescroll版本低，用最新的就没有这个问题了，但是现在又出现了一个心的问题，我用的是bootstrap框架，现在的问题是bootstrap的弹出层上如果我想用这个nicescroll美化滚动条的话怎么实现，直接调用不管用是不是有什么方法，我英文不好，官网上看着太难受。

追答

Bootstrap弹出层使用静态代码实现,在里面嵌入一个

然后使用代码
$(document).ready(

function()

$("#viewportdiv").niceScroll("#wrapperdiv",cursorcolor:"#00F");


);
这样应该没问题吧...

本回答被提问者采纳

滚动条插件---jquery.nicescroll.js 简单使用

// 引入下载好的js文件

<script src="./js/jquery.nicescroll.min.js"></script>

<script>

//因为在同一个页面有tab切换项都需要使用滚动条，遇到一个问题，就是在点击下一个切换项的时候，上一个切换项的滚动条不会立即消失，所以给每一个切换项设置点击效果，添加和删除类名。

//注意：如果没有给不同的切换项添加上类名的话，滚动条是不会显示的，所以在开始就要给他们添加上需要的类名，在点击的时候在去删除或者添加类名，这样就不会出现前面滚动条不会立即消失的问题了

$(‘.clickHu‘).click(function () {

  $(‘#wrapper1‘).addClass(‘wrapper1‘)

  $(‘#wrapper2‘).removeClass(‘wrapper2‘)

})

$(‘.clickP‘).click(function () {

  $(‘#wrapper1‘).removeClass(‘wrapper1‘)

  $(‘#wrapper2‘).addClass(‘wrapper2‘)

})

//设置滚动条

$(‘.wrapper1‘).niceScroll({

  // 设置滚动条颜色

  cursorcolor: "#2a72f5",

  // 滚动条最大透明度

  cursoropacitymax: 1,

  //使光标拖动滚动像在台式电脑触摸设备 true滚动条拖动不可用 

  touchbehavior: false,

  // 滚动条宽度

  cursorwidth: "10px",

  // 滚动条边框

  cursorborder: "0",

  // 滚动条圆角

  cursorborderradius: "5px",

  // 轨道背景色

  background: "#bdbdbd",

  // 隐藏滚动条的方式，可用的值：true|无滚动时隐藏，"cursor"|隐藏，false|不隐藏，"leave"|仅在指针离开内容时隐藏，"hidden"|一直隐藏，"scroll"|仅在滚动时显示

  autohidemode: false

})

</script>