Javascript 滑动切换（）的问题

我在一个场景中使用了滑动切换（）。在id=“初学者sub”中，我使用了定制的滚动条（enscroll.js）以防溢出。如果使用默认浏览器的滚动条，slideToggle（）可以正常工作。但当我使用自定义滚动条时，在向上滑动和向下滑动期间，移动元素和向上滚动条之间存在滞后，即它们不能同时到达顶部。滚动条正在缓慢向上滑动

问题是什么

以下是javascript代码：-

$(document).ready(function(){
//For custom scroll loading
$('#beginner-sub').enscroll({
verticalTrackClass: 'track',
verticalHandleClass: 'handle',
minScrollbarLength: 28
});

 $("#flip").click(function(){
    $("#panel").slideToggle("slow");        
});

$("#beginner").click(function(){
    $("#beginner-sub").slideToggle("slow");
}); 

}))

HTML代码-

<!-- left panel area - begin -->
                <div id="left-pane" class="col-md-2 col-lg-2">
                    <div class = "row-fluid">
                        <div id="flip">Algorithms<i id="slide-down" class="fa fa-chevron-down pull-right" aria-hidden="true"></i><i id="slide-up" 
                        class="fa fa-chevron-up pull-right" aria-hidden="true"></i>
                        </div>
                        <div id="panel">
                            <a id="beginner">Beginner Level<i class="fa  fa-hand-o-right pull-left" aria-hidden="true"></i><i class="fa fa-angle-double-down pull-right" 
                            aria-hidden="true"></i><i class="fa   fa-angle-double-up pull-right" aria-hidden="true"></i></a>
                            <div>
                                <div id="beginner-sub" class="well">
                                    <a>Simple Program<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
                                    <hr><a>Reverse a string<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>            
                                    <hr><a>Odd Even<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
                                    <hr><a>Possible Subsets<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
                                    <hr><a>Uncommon Elements<i class="fa fa-angle-double-right pull-left" aria-hidden="true"></i></a>
                                    <hr>
                                </div>
                            </div>  
                            <hr>
                            <a>Intermediate Level<i class="fa fa-hand-o-right pull-left" aria-hidden="true"></i></a>                                
                            <hr>
                        </div>
                    </div>
                </div>

---

首先，您将使用锚定标记（）来处理此问题。在这种情况下，您肯定应该使用标记。另外，你应该把目标放在你的标签下面。把你的CSS贴在这里，这样我就可以看到你想做什么

我看不出你所描述的问题。你能分享一下这个问题的答案吗@MichaelEugeneYuen请看一下我在问题中添加的图像。向上滑动时，滚动条相对于其他部分向上缓慢移动。“按滚动条”不是默认的滚动条。这是定制的，我没有干净的解决方案。但是我可以建议的是，不要使用slideToggle（），而是使用toggleClass（）来启用和杀死带有target.enscroll（'destroy'）的enscroll。我已经编辑了我的问题，并添加了CSS部分以及一个屏幕截图。我有这个可以让你很容易理解我的问题。

#flip{
    overflow : auto;    
    color : white;
    cursor : pointer;
    font-family : Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size : 15px;
    padding: 5px;
    text-align: center;
    border-radius : 0px;
    border-width : 1px;
    border-color : #cccccc;
    border-style : solid;
    background-color : #1a1a1a; 
}

#panel {
    overflow : auto;
    color : white;
    cursor : pointer;
    font-family : Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size : 14px;
    padding: 10px;
    text-align: left;
    border-radius : 0px;
    border-width : 1px;
    border-color : #cccccc;
    border-style : solid;
    background-color : #404040; 
    display: none;
}

#beginner-sub {
    overflow : auto; 
    width : 206px;   
    height : 500px;
    padding-left : 5px;
    padding-right: 5px;
    background-color : #666666;
    border-style : dotted;
    border-width : 0.5px;
    border-radius : 0px;
    padding-top : 10px;
    margin-top : 20px;
    padding-bottom : 15px;
}

.track {
    position : relative !important;
    overflow : auto !important;
    margin-top : 20px;
    width : 10px;
    background-clip : padding-box;
    background-color : silver;
    border-style : solid;
    border-color : transparent;
    border-width : 0;
    border-left-width : 1px;
}

.track.dragging,
.track:hover {
    background : #f2f2f2; 
    background : rgba(0, 0, 0, 0.05);
    -webkit-box-shadow : inset 1px 0 0 rgba(0, 0, 0, 0.1);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.1);
}

.track:active {
    background : #f2f2f2; 
    background : rgba(0, 0, 0, 0.05);
    -webkit-box-shadow : inset 1px 0 0 rgba(0, 0, 0, 0.14),
                        inset -1px -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow : inset 1px 0 0 rgba(0, 0, 0, 0.14),
                inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

.handle {
    overflow : auto;
    width: 10px;
    height : 50px !important;
    background-clip: padding-box;
    background: #ccc; 
    background: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
                        inset 0 -1px 0 rgba(0, 0, 0, 0.07);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),
                inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}

.handle:hover {
    background: #999; 
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.dragging .handle,
.handle:active {
    background: gray; 
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
}