Question

我在一个网站上工作，该网站有一个切换我的内容div的onclick菜单。现在我试图在该div上获得一个自定义滚动条，但我似乎无法找到一个实际工作的插件。我不确定它是否有可能完成这个......

这是我的代码

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slide-fade-content.js"></script>
<!--Jscrollpane-->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<!--Jscrollmousewheel-->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!--Jscrollstyle-->
<link href="css/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
<script>
    $(function(){
    $('#menu a').click(function () {
        $('#menu a').css('background', 'none');
     $(this).css('background', '#00d6f6');
     });
 });
</script>
</head>

<body>
<div id="container">
    <div id="wrapper">
        <div id="left">
            <center><img src="images/logo.png"></center>
            <div id="menu">
                <center><a class="more" href="#first-item"><b>Portfolio</b></a>&nbsp;&nbsp;<a class="more" href="#second-item"><b>About Me</b></a>&nbsp;&nbsp;<a class="more" href="#third-item"><b>Services</b></a><br></center>
                <center><a class="more" href="#fourth-item"><b>Contact</b></a></center>
            </div>
            <div id="footer">© DNDesign 2014</div>
        </div>
        <div id="content">
            <div id="ajax" class="scroll-pane"></div>
        </div>
    </div>
</div>
</body>
</html>

<script>
$(function()
{
    $('.scroll-pane').jScrollPane();
});
</script>

这是CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0px;
}

p {
    color: #fff;
}

#container {
    width:100%;
    height: 100%;
    background: url(images/background.png) repeat-y fixed #000;
}

#wrapper {
    width: 960px;
    height: 100%;
    margin: 0px auto;
}

#left {
    width:320px;
    height:100%;
    background: #121212;
    margin-left: 10px;
    float: left;
    border: 10px double black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#menu {
    width: 300px;
}

a {
    color: #fff;
    text-decoration: none;
    font-size:18px;
    font-style: oblique;
}

a:hover {
    background: #00d6f6;
}

#footer {
    width: 320px;
    position: absolute;
    bottom: 15px;
    text-align: center;
    color: #fff;
}

#content {
    width: 600px;
    height: 100%;
    margin-left: 30px;
    float: left;
    background: url(images/background-left1.png) bottom left no-repeat, url(images/background-left2.png) bottom right no-repeat, url(images/background-left4.png) top left no-repeat, url(images/background-left3.png) top right no-repeat, url(images/logobottom.png) bottom center no-repeat;
}

#ajax {
    margin-top: 113px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.scroll-pane {
    overflow: auto;
}

这是ajax div的代码：

/* jQuery Color Fade v0.1 * Released under the CC BY 3.0 License (http://creativecommons.org/licenses/by/3.0/) * https://github.com/matthewbj/jQuery-Color-Fade */
(function(b){var c={init:function(a){var c=b.extend({fadeColor:"#00d6f6",fadeTime:800,delayTime:600},a),d={position:"relative","z-index":1},e={height:"100%",width:"100%","background-color":c.fadeColor,position:"absolute",top:0,left:0,"z-index":"-1"};return this.each(function(a){b(this).css(d).append('<div id="colorFadeDiv'+a+'" class="colorFadeClass"></div>');b("#colorFadeDiv"+a).css(e).delay(c.delayTime).fadeOut(c.fadeTime)})},refade:function(a){a=b.extend({fadeColor:"#00d6f6",fadeTime:800,delayTime:600},
a);b(this).find(".colorFadeClass").css("background-color",a.fadeColor).show().delay(a.delayTime).fadeOut(a.fadeTime)}};b.fn.colorFade=function(a){if(c[a])return c[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof a||!a)return c.init.apply(this,arguments);b.error("Method "+a+" does not exist on jQuery.colorFade")}})(jQuery);

// slide & fade content
jQuery(document).ready(function($) {
    $('.more').on('click', function() {
        var href = $(this).attr('href');
        if ($('#ajax').is(':visible')) {
            $('#ajax').css({ display:'block' }).animate({ height:'0' }).empty();
        }
        $('#ajax').css({ display:'block' }).animate({ height:'450px' },function() {
            $('#ajax').html('<img id="loader" src="loader.gif">');
            $('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); // http://loadinfo.net/
            $('#ajax').load('slide-fade-content.html ' + href, function() {
                $('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#00d6f6' });
            });
        });
    });
});

包含加载到ajax div

中的div的页面

<div id="load">
<div id="first-item">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="second-item">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="third-item">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>
<div id="fourth-item">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
</div>

基本上我有一个额外的页面，其中包含每个菜单链接页面的内容的div。当您单击其中一个菜单按钮时，它会从另一个网页（在网站本身上看不到）中检索其中一个div，并使用ajax ID在div中显示它。所以我想我需要把滚动条放在那个div上。

编辑：我已经尝试将Jscrollpane实现到我的代码中，但它没有显示......我做错了什么？另外，我还没有在Jscrollpane附带的原始CSS中编辑任何内容，因此无法解决问题。

Answer 1

看起来问题是ajax更新本身 - 在应用jScrollPane后更新内容会删除自定义滚动条元素（位于容器内），因此您应该重新初始化jScrollPane以在ajax更新后查看滚动条。为避免这种情况，您应该使用方法getContentPane来获取要更新的元素。 JavaScirpt更新demo。

您可以尝试使用jQuery Scrollbar代替此插件，您可以使用元素ID或类选择器$('.element-class').not('.scroll-wrapper').html(content)来更新内容，即使jQuery Scrollbar未初始化也可以安全使用

切换div上的Jscrollpane滚动条

1 个答案: