slideToggle()问题

Question

我有一个使用slideToggle().的场景在id="beginner-sub"，中，我使用了自定义滚动条(enscroll.js)来防止溢出。如果我使用默认浏览器的滚动条，slideToggle()可以正常工作。但是当我使用定制的滚动条时，在滑动和向下滑动的过程中，移动元素和滚动条向上的.i.e之间有一个滞后--它们不是同时到达顶部的。滚动条正在缓慢地向上滑动。

有什么问题吗？

​

​

以下是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 -

#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);
}

Answer 1

首先，您使用一个Anchor标记()来处理这个问题。在这种情况下，绝对应该使用标记。而且，你应该在你的标签下瞄准它。把你的CSS贴在这里，这样我就能看到你想做什么。