Полоса прокрутки Jscrollpane на переключенном элементе 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' });
            });
        });
    });
});

страница, которая имеет div, которые загружаются в ajax 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 с другой веб-страницы (который не виден на самом сайте) и показывает его внутри элемента div с идентификатором ajax. Так что я думаю, что мне нужно поставить полосу прокрутки на этом div.

Редактировать: я пытался внедрить Jscrollpane в мой код, но он не показывает... что я делаю не так? Кроме того, я еще ничего не редактировал в оригинальном CSS, который поставляется с Jscrollpane, так что это не может быть проблемой.

Источник

1 ответ

Похоже, проблема заключается в самом обновлении ajax - обновление содержимого после применения jScrollPane удаляет пользовательские элементы полосы прокрутки (которые находятся внутри вашего контейнера), поэтому вам следует повторно инициализировать jScrollPane, чтобы увидеть полосы прокрутки после обновления ajax. Чтобы избежать этого, вы должны использовать метод getContentPane чтобы получить элемент для обновления. Демонстрация обновления JavaScirpt.

Вместо этого плагина вы можете попробовать jQuery Scrollbar, где вы можете обновить контент, используя идентификатор элемента или селектор класса. $('.element-class').not('.scroll-wrapper').html(content) который вы можете безопасно использовать, даже если jQuery Scrollbar не инициализирован

Источник
Другие вопросы по тегам