切換div上的Jscrollpane滾動條

Question

我在一個具有onclick菜單的網站上工作，該菜單可切換我的內容div。 現在，我試圖在該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更新演示。

除了這個插件，您可以嘗試使用jQuery Scrollbar ，您可以在其中使用元素ID更新內容，或使用類選擇器$('.element-class').not('.scroll-wrapper').html(content)來安全地更新內容即使未初始化jQuery滾動條也要使用

切換div上的Jscrollpane滾動條

問題描述

1 個解決方案

解決方案1
0 2014-03-26 09:54:41

切換div上的Jscrollpane滾動條

問題描述

1 個解決方案

解決方案1 0 2014-03-26 09:54:41

解決方案1
0 2014-03-26 09:54:41