Question

我有一个使用 slideToggle（）的方案。在id =＆＃34; beginner-sub ＆＃34;中，我在溢出的情况下使用了自定义滚动条（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 -

#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，以便我可以看到您正在尝试做什么。

slideToggle（）的问题

1 个答案: