Jquery 单击鼠标即可启用/禁用的自定义滚动条

我有一桌电影。为了在包含概要和特殊功能列表的同时保持每一行的合理长度，我创建了一个高度为20px的“.synopsisSmall”div。内部是“.synopsisFull”div或“.Extras”div.“.synopsisSmall”在单击时扩展到其子级的大小。“.Extras”的最大高度为200px，因为一些列表刚刚失控。我将其溢出设置为滚动，但随后它变得可滚动，甚至崩溃，因此我将其溢出设置为隐藏，并更改了代码：

$(document).ready(function(){
    //Tag all rows as collapsed
    $(".synopsisSmall").attr("isclicked", "notclicked");
})
$(document).ready(function(){
$(".synopsisSmall").click(function(){
    //Determine which row has been clicked on, and how tall its full contents is in each column
    var clickedID = $(this).attr("id");
    var synopsisHeight = $("#" + clickedID + ".synopsisFull").height();
    var featuresHeight = $("#" + clickedID + ".Extras").height();
    //Check if row is collapsed or expanded
    var currentHeight = $(this).attr("isclicked");
    //If collapsed, animate the row height to either the height of the synopsis or the height of the special features, whichever is greater
    if (currentHeight == "notclicked") {
        if (synopsisHeight > featuresHeight) {
            $("#" + clickedID + ".synopsisSmall").animate({"height":(synopsisHeight + "px")}, 500); }
            else {
            $("#" + clickedID + ".synopsisSmall").animate({"height":(featuresHeight + "px")}, 500); }
        //Make it scrollable
        $("#" + clickedID + ".Extras").css({"overflow":"auto"});
    //And tag it as expanded
    $("#" + clickedID + ".synopsisSmall").attr("isclicked", "clicked");
    //Collapse any expanded rows, and tag them as collapsed
    $(".synopsisSmall").not("#" + clickedID).animate({"height": "20px"});
    $(".synopsisSmall").not("#" + clickedID).attr("isclicked", "notclicked"); }
    //Otherwise, if the clicked row is already expanded, simply collapse it and disable scrolling
    else { $("#" + clickedID + ".synopsisSmall").animate({"height":"20px"});
    $("#" + clickedID + ".Extras").css({"overflow":"hidden"});
            //And then tag it as collapsed
            $("#" + clickedID + ".synopsisSmall").attr("isclicked", "notclicked"); }
})
});

唯一的问题是滚动条看起来很难看，并且占据了大量的水平空间。所以我在谷歌上搜索了一下，找到了一个名为NiceSoll的jQuery插件。在启用滚动的行下方添加了以下内容：

$("#" + clickedID + ".Extras").niceScroll();

但现在，当折叠时，它仍然可以滚动。如果重新展开，NiceScroll的滚动条会保持不变，而默认的滚动条会在其后面弹出，看起来很难看，并且会占用空间

有什么办法让我成功吗

---

ETA：一个JSFIDLE链接，指向我没有NiceScroll的东西。不确定如何在其中获取NiceScroll代码，但基本上，当我尝试使用它时，滚动条不会消失，内容仍然可以滚动。

要删除NiceScroll，请使用以下代码：

  $("#" + clickedID + ".Extras").getNiceScroll().remove();

$（文档）.ready（函数（）{
$（“.synopsisSmall”）.attr（“isclicked”、“notclicked”）；
})
$（文档）.ready（函数（）{
$（“.synopsisSmall”）。单击（函数（）{
var clickedID=$（this.attr（“id”）；
var synopsisHeight=$（“#”+clickedID+“.synopsisFull”）.height（）；
var featuresHeight=$（“#”+clickedID+“.Extras”）.height（）；
var currentHeight=$（this.attr（“isclicked”）；
如果（当前高度=“未单击”）{
如果（synopsisHeight>featuresHeight）{
$（“#”+单击EDID+”.synopsisSmall”）。制作动画({
“高度”：（synopsisHeight+“px”）
}, 500);
}否则{
$（“#”+单击EDID+”.synopsisSmall”）。制作动画({
“高度”：（特征高度+像素）
}, 500);
}
$（“#”+单击EDID+“.Extras”）.css({
“溢出”：“自动”
});
$（“#”+clickedID+”.synopsisSmall”）.attr（“isclicked”，“clicked”）；
$（“.Extras”）.not（“#”+clickedd.css({
“溢出”：“隐藏”
});
$（“.synopsisSmall”）。不（“#”+单击edid）。设置动画({
“高度”：“20px”
});
$（“.synopsisSmall”）.not（“#”+clickedd）.attr（“isclicked”，“notclicked”）；
}否则{
$（“#”+单击EDID+”.synopsisSmall”）。制作动画({
“高度”：“20px”
});
$（“#”+单击EDID+“.Extras”）.css({
“溢出”：“隐藏”
});
$（“#”+clickedID+”.synopsisSmall”）.attr（“isclicked”，“notclicked”）；
}
setTimeout（函数（）{
$（“#”+单击EDID+”.Extras”）.getNiceSoll（）.remove（）；
$（“#”+单击EDID+”.Extras”）.niceSroll（）；
}, 500);
})
});
.Extras{
垂直对齐：中心对齐；
文本对齐：左对齐；
保证金：自动；
最大高度：200px；
溢出：隐藏；
}
李先生{
线高：16px；
}
额外费用{
填充顶部：0px；
垫底：0px；
边际上限：0px；
边缘底部：0px；
文本对齐：左对齐；
}
.synopsisSmall{
溢出：隐藏；
光标：指针；
垂直对齐：中心对齐；
高度：20px；
显示器：flex；
}
synopsisFull先生{
垂直对齐：中心对齐；
最大高度：无；
显示：块；
保证金：自动；
}
桌子
运输署，
th{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：12px；
颜色：#FFFFFF；
垂直对齐：中心对齐；
边界塌陷：塌陷；
文本对齐：居中；
填充：8px；
右侧填充：12px；
左侧填充：12px；
文本换行：正常；
换字：正常；
}
桌子{
边框：薄实线#FFF；
背景色：#666；
}
运输署，
th{
边界：无；
最大宽度：250px；
}

标题
提要
年
特色
蝙蝠侠开始
在与导师一起训练后，蝙蝠侠开始了他的犯罪之战，以使犯罪猖獗的高谭市摆脱稻草人和阴影联盟对其施加的腐败。
2005

黑暗骑士IMAX序曲
电影体验
附加镜头：

写作反思
数字蝙蝠侠
蝙蝠侠开始特技表演


故事背后

坦克手开始
旅程开始了
塑造身心
高谭市崛起
斗篷
蝙蝠侠-不倒翁
发现之路
拯救高谭市
蝙蝠的起源
静物画廊
机密文件
伯恩霸权
当杰森·伯恩因中情局的一次行动出错而被陷害时，他被迫恢复他以前作为一名训练有素的刺客的生活以生存。
2004

删除的场景
匹配身份：铸造
保持真实
炸毁东西
和杰森·伯恩在一起
伯恩狂野：格斗训练
紧急摄像：在莫斯科的街道上奔跑
Go Mobile加快了行动速度
场景剖析：爆炸桥追逐场景
与约翰·鲍威尔一起得分
伯恩策划者（下）
伯恩诊断（下）
导演保罗·格林格拉斯的音频评论