jQuery nicescroll不支持动态内容和其他随机效果的JavaScript函数

时间:2017-06-05 12:20:03

标签: javascript jquery scroll nicescroll

所以这就是问题,因为有很多导航链接,我的侧边栏有很高的高度。我正在使用jQuery nicescroll插件使它看起来很好。在侧边栏中我也有h3标签,它会产生随机效果,每隔4秒显示字母(参见代码)。因此,当它打开时 - 滚动在这4秒内根本不工作,你不能进行任何滚动。我尝试使用$("#sidebar").getNiceScroll().resize(),但它也不起作用。有没有办法让它发挥作用?

<div id="sidebar">
<h3 id="output">Random</h3>
</div>

//Calling for nicescroll function for my sidebar
$(function(){
    $("#sidebar").niceScroll({ cursorcolor:"#66aee9", cursorfixedheight: 400 });
})


//Random effect for my h3 tag
setInterval(function(){
  $(document).ready(function(){
  var theLetters = "abcdefghijklmnopqrstuvwxyz#%&^+=-"; //You can customize what letters it will cycle through
  var ctnt = "Random"; // Your text goes here
  var speed = 50; // ms per frame
  var increment = 8; // frames per step. Must be >2
  var clen = ctnt.length;
  var si = 0;
  var stri = 0;
  var block = "";
  var fixed = "";
  //Call self x times, whole function wrapped in setTimeout
  (function rustle (i) {
  setTimeout(function () {
    if (--i){rustle(i);}
    nextFrame(i);
    si = si + 1;
  }, speed);
  })(clen*increment+1);
  function nextFrame(pos){
    for (var i=0; i<clen-stri; i++) {
      //Random number
      var num = Math.floor(theLetters.length * Math.random());
      //Get random letter
      var letter = theLetters.charAt(num);
      block = block + letter;
    }
    if (si == (increment-1)){
      stri++;
    }
    if (si == increment){
    // Add a letter;
    // every speed*10 ms
    fixed = fixed +  ctnt.charAt(stri - 1);
    si = 0;
    }
    $("#output").html(fixed + block);
    block = "";
  }
  });
}, 4000);

1 个答案:

答案 0 :(得分:0)

我更改为行并在jsfiddle中检查它,看起来像滚动正常。

在:

setInterval(function(){
  $(document).ready(function(){
...
  });
}, 4000);

后:

$(document).ready(function(){
  setInterval(function(){
...
  }, 4000);
});