javascript - 自定义滚动条和 AJAX 选项卡问题

Question

问候其他 stackoverflow 成员，

我在尝试让我的自定义滚动条与基于 ajax 的选项卡结合使用时遇到了一些重大问题。任何帮助将不胜感激。我已经完成了其中的大部分内容并且可以正常工作，我将通过下面的代码和演示中的代码提供我目前拥有的内容的演示。

这是演示:http://jsfiddle.net/54RLc/

正如您将在上面的演示中注意到的那样，第一个选项卡按预期工作 - 只需将图标悬停在容器左上角即可查看下拉菜单选项卡 - 但之后的任何选项卡，自定义滚动条都不会' 似乎想申请自己。任何帮助将不胜感激!

HTML:

<div id="extended_container" class="shadow_effect">
        <h2>Divisions</h2>

    <ul id="options">
        <li>
            <ul>
                <li><a href="#" id="division_all_link" class="active">All</a>

                </li>
                <li><a href="#" id="division_latest_link">Latest</a>

                </li>
                <li><a href="#" id="division_featured_link">Featured</a>

                </li>
                <li><a href="#" id="division_popular_link">Most Popular</a>

                </li>
            </ul>
        </li>
    </ul>
    <div id="division_all_wrapper" class="modern-skin">
        <div id="division_all" class="navcontent">
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
        </div>
    </div>
    <div id="division_latest_wrapper" class="modern-skin">
        <div id="division_latest" class="navcontent" style="display: none;">
            <div class="holder_box">
                <p>Testing</p>
            </div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
        </div>
    </div>
    <div id="division_featured_wrapper" class="modern-skin">
        <div id="division_featured" class="navcontent" style="display: none;">
            <div class="holder_box">
                <p>Gamelll</p>
            </div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
        </div>
    </div>
    <div id="division_popular_wrapper" class="modern-skin">
        <div id="division_popular" class="navcontent" style="display: none;">
            <div class="holder_box">
                <p>Play</p>
            </div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
            <div class="holder_box"></div>
        </div>
    </div>
</div>

CSS:

.scrollable {
    position: relative;
}
.scrollable:focus {
    outline: 0;
}
.scrollable .viewport {
    position: relative;
    overflow: hidden;
}
.scrollable .viewport .overview {
    position: absolute;
}
.scrollable .scroll-bar {
    display: none;
}
.scrollable .scroll-bar.vertical {
    height: 100%;
    position: absolute;
    right: 3px;
    z-index: 9999;
}
.scrollable .scroll-bar .thumb {
    position: absolute;
}
.scrollable .scroll-bar.vertical .thumb {
    width: 100%;
    min-height: 10px;
}
.not-selectable {
    -moz-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* ===== Start of 'Modern skin for Custom Scrollbar' ===== */
 .scrollable.modern-skin {
    padding-right: 16px;
}
.scrollable.modern-skin .scroll-bar {
    padding-bottom: 4px;
    border: 1px solid #151515;
    border-radius: 6px;
    -moz-box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
    -webkit-box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
    box-shadow: inset 0 0 5px #555, inset 0.125em 0 0.42em 0.125em #111;
}
.scrollable.modern-skin .scroll-bar .thumb {
    background-color: #95aabf;
    border: 1px solid #151515;
    border-radius: 4px;
}
.scrollable.modern-skin .scroll-bar.vertical .thumb {
    width: 6px;
    margin: 1px 0 0 1px;
    background: -moz-linear-gradient(left, #95aabf 0%, #515D69 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #95aabf), color-stop(100%, #515D69));
    background: -webkit-linear-gradient(left, #95aabf 0%, #515D69 100%);
    background: -o-linear-gradient(left, #95aabf 0%, #515D69 100%);
    background: -ms-linear-gradient(left, #95aabf 0%, #515D69 100%);
    background: linear-gradient(to right, #95aabf 0%, #515D69 100%);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient( startColorstr='#95aabf', endColorstr='#515D69',GradientType=1 )";
    -moz-box-shadow: inset 0.05em 0 0.3em -0.05em #111;
    -webkit-box-shadow: inset 0.05em 0 0.3em -0.05em #111;
    box-shadow: inset 0.05em 0 0.3em -0.05em #111;
}
.scrollable.modern-skin .scroll-bar.vertical {
    width: 10px;
    max-height: 290px !important;
}
#extended_container {
    width: 304px;
    height: 335px;
    margin: 10px 16px;
    float: left;
    display: inline;
    background: #222;
    border: 1px solid #000;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    position: relative;
    top: 40px;
    left: 5px;
}
#extended_container h2 {
    width: 304px;
    height: 27px;
    padding: 3px 0 0 0;
    margin: 0;
    background-color: #444;
    background: -moz-linear-gradient(#444, #191919);
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#191919));
    background: -webkit-linear-gradient(#444, #191919);
    background: -o-linear-gradient(#444, #191919);
    border-top: 2px solid #616161;
    border-bottom: 1px solid #111;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    float: left;
    color: #BBB;
    text-align: center;
    text-shadow: 1px 1px #222, -1px -1px #000;
}
#options, #options ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#options {
    width: 23px;
    height: 18px;
    padding: 3px;
    background: url(../images/Icons/menu-icon.png) no-repeat 5px 1px;
    border-top: 1px solid #616161;
    border-radius: 4px;
    -moz-box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
    -webkit-box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
    box-shadow: inset 0 -0.05em 0.2em 0.05em #111;
    float: left;
    position: relative;
    top: -29px;
    left: 4px;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
#options:hover, #options.active {
    background: url(../images/Icons/menu-icon.png) rgba(0, 0, 0, 0.15) no-repeat 5px 1px;
    border-top: 1px solid #494949;
    -moz-box-shadow: inset 0 0.1em 0.4em 0.1em #111;
    -webkit-box-shadow: inset 0 0.1em 0.4em 0.1em #111;
    box-shadow: inset 0 0.1em 0.4em 0.1em #111;
}
#options {
    zoom: 1;
}
#options li {
    position: relative;
}
#options ul {
    width: 150px;
    background-color: #444;
    background: -moz-linear-gradient(#444, #191919);
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#191919));
    background: -webkit-linear-gradient(#444, #191919);
    background: -o-linear-gradient(#444, #191919);
    border: 1px solid #111;
    border-radius: 6px;
    -moz-box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
    -webkit-box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
    box-shadow: 2px 2px 2px #151515, inset 0 -0.1em 0.4em 0.1em #111;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    position: relative;
    top: 21px;
    left: -14px;
    z-index: 9999;
}
#options li:hover > ul {
    margin: 0;
    opacity: 1;
    visibility: visible;
}
#options ul li {
    display: block;
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
    box-shadow: 0 1px 0 #111, 0 2px 0 #616161;
}
#options ul li a {
    width: 130px;
    padding: 10px;
    display: block;
    white-space: nowrap;
    float: none;
    color: #999;
    font: 12px Arial, Helvetica, sans-serif;
    font-style: bold;
    text-shadow: 1px 1px #222, -1px -1px #000;
}
#options ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
#options ul li a:hover, #options ul li a.active {
    background-color: #515D69;
    background: -moz-linear-gradient(#515D69, #050D14);
    background: -webkit-gradient(linear, left top, left bottom, from(#515D69), to(#050D14));
    background: -webkit-linear-gradient(#515D69, #050D14);
    background: -o-linear-gradient(#515D69, #050D14);
    -moz-box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
    -webkit-box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
    box-shadow: inset 0 -0.1em 0.4em 0.1em #111;
    color: #FFF;
    text-shadow: 1px 1px #2D363F, -1px -1px #000;
}
#options ul li:first-child > a {
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}
#options ul li:first-child > a:after {
    content:'';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #343536;
    position: absolute;
    top: -6px;
    left: 19px;
}
#options ul ul li:first-child a:after {
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #515D69;
    top: 50%;
    left: -6px;
}
#options ul li:first-child a:hover:after {
    border-bottom-color: #515D69;
}
#options ul li:last-child > a {
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}
#division_all_wrapper, #division_latest_wrapper, #division_featured_wrapper, #division_popular_wrapper {
    width: 304px;
    height: 299px;
    position: absolute;
    top: 36px;
    overflow: hidden;
    background: pink;
}
.navcontent {
    width: 304px;
    float: left;
    position: relative;
    z-index: 9997;
    background: blue;
}
.holder_box {
    width: 286px;
    height: 100px;
    padding: 0;
    margin: 5px 8px 10px 8px;
    border: 1px solid #111;
}

JS/AJAX:

不幸的是，由于这篇文章的正文超过 30000 个字符，无法提供所需的所有 JS/AJAX...但是，演示链接中提供了完整的 JS/AJAX。

Answer 1

大多数自定义滚动条脚本不会立即对隐藏内容起作用。

一些脚本，例如 Tiny Scrollbar和 Malihu's Custom Scrollbar提供解决此类问题的更新功能。

我刚刚浏览了 custom scrollbar script that you're using 的 github 站点而且它似乎没有更新功能。