Question

我使用jQuery插件版本3.10来使用自定义滚动条。我有很多水平幻灯片，每个都使用自己的自定义滚动条。我想要包含扩展文本的javascript .onclick函数。但是，当我展开文本并且溢出时，滚动条不会出现。我使用以下代码来选择应该具有onclick功能的标题（标签“h3”，类“点击”）：

function toggleNext(el) {
 var next=el.nextSibling;
 while(next.nodeType != 1) next=next.nextSibling;
 next.style.display=((next.style.display=="none") ? "block" : "none");
}

function getElementsByTagAndClassName(tag,cname) {
 var tags=document.getElementsByTagName(tag);
 var cEls=new Array();
 for (i=0; i<tags.length; i++) {
  var rE = new RegExp("(^|\s)" + cname + "(\s|$)");
   if (rE.test(tags[i].className)) {
   cEls.push(tags[i]);
   }
  }
 return cEls;
}
function toggleNextByTagAndClassName(tag,cname) {
 var ccn="clicker";
 clickers=getElementsByTagAndClassName(tag,cname);
 for (i=0; i<clickers.length; i++) {
  clickers[i].className+=" "+ccn;
  clickers[i].onclick=function() {toggleNext(this)}
  toggleNext(clickers[i]);
 }
}
window.onload=function(){toggleNextByTagAndClassName('h3','click')}

HTML示例：

<article class="slide" id="lorem">
<div class="inner">
<h3 class="click">Lorem Ipsum</h3>
<div class="content">
<p>Sample text, is sample text, is sample text</p>
</div>

我从以前的研究中知道我已经完成了我必须从niceScroll jQuery插件调用resize函数，如下所示。

$(name-of-div).getNiceScroll().resize()

我尝试使用名称为div的resize函数作为内容，但这不会产生预期的结果。如果可以的话请帮忙。我不知道如何将两者结合起来。

Answer 1

不确定是否理解发生了什么，但我遇到了类似的问题。尝试在setTimeout中使用resize（）。

请注意，“name-of-div”必须是滚动容器的名称。 jQuery代码看起来像：

setTimeout(function(){
  $('name-of-div').getNiceScroll().resize()
}, 500);

我使用500作为示例，但是如果div的文本在动画中展开，则必须使用比div动画更大的数字，当然，代码必须在所有交互之后执行

Answer 2

请参阅下面的问题。有两个答案，两个都对我有用。基本上，我在这里建议了使用第二种方法（请参阅第二个答案）。因为，它可以立即起作用，并且在调整div大小后，第一种方法似乎不能立即起作用。

Jquery Nice scroll not working

Javascript niceScroll调整大小功能

2 个答案: