Fatal编程技术网
  • javascript/
  • Javascript 切换div上的Jscrollpane滚动条

Javascript 切换div上的Jscrollpane滚动条

javascript jquery html

Javascript 切换div上的Jscrollpane滚动条,javascript,jquery,html,scrollbar,Javascript,Jquery,Html,Scrollbar,我在一个网站上工作，它有一个onclick菜单，可以切换我的内容div。 现在我试图在那个div上获得一个自定义滚动条，但我似乎找不到一个真正有效的插件。我不确定是否有可能做到这一点 这是我的密码 <head> <meta charset="utf-8"> <title>Untitled Document</title> <script type="text/javascript" src="http://ajax.googleapis.co

我在一个网站上工作，它有一个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>
以下是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' });
            });
        });
    });
});

/*jQuery Color Fade v0.1*根据CC BY 3.0许可证发布(http://creativecommons.org/licenses/by/3.0/) * https://github.com/matthewbj/jQuery-Color-Fade */
函数（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:“绝对”，top:0，left:0，“z-index:”--1}；返回这个。每个函数（a）{b（this.css.css.d.）追加（“”）；b（“'fadeColor:”）.css）（c.delayTime）.fadeOut（c.fadeTime）}，重构：函数（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.colorfad=函数（a）{if（c[a]）返回c[a]。apply（this，Array.prototype.slice.call（参数，1））；if（“object”==a的类型| |！a）返回c.init.apply（这，参数）；b.error（“方法”+a+”在jQuery.colorfed}）（jQuery上不存在）;
//幻灯片和淡入淡出内容
jQuery（文档）.ready（函数（$）{
$（'.more'）。在（'click'，function（）上{
var href=$（this.attr（'href'）；
if（$（'#ajax'）。是（':visible'））{
$（'#ajax'）.css（{display:'block'}）.animate（{height:'0'}）.empty（）；
}
$（'#ajax'）.css（{display:'block'}）.animate（{height:'450px'}，function（））{
$（'#ajax'）.html（''）；
$（'#loader'）.css（{边框：'none'，位置：'relative'，顶部：'24px'，左侧：'48px'，框影：'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>


Lorem ipsum dolor sit amet，Concertetuer Adipising Elite.Phasellus hendrerit.Pellentsque aliquet Nib nec urna.在nisi neque，aliquet vel，dapibus id，mattis vel，nisi.Sed pretium，ligula sollicitudin Laoret viverra，侵权人Lio，侵权人libero sodales leo，eget blandit nunc侵权人eu nibh.Nullam mollis.Ut justo.Suspendisse Potentis

Lorem ipsum dolor sit amet，Concertetuer Adipising Elite.Phasellus hendrerit.Pellentsque aliquet Nib nec urna.在nisi neque，aliquet vel，dapibus id，mattis vel，nisi.Sed pretium，ligula sollicitudin Laoret viverra，侵权人Lio，侵权人libero sodales leo，eget blandit nunc侵权人eu nibh.Nullam mollis.Ut justo.Suspendisse Potentis

Lorem ipsum dolor sit amet，Concertetuer Adipising Elite.Phasellus hendrerit.Pellentsque aliquet Nib nec urna.在nisi neque，aliquet vel，dapibus id，mattis vel，nisi.Sed pretium，ligula sollicitudin Laoret viverra，侵权人Lio，侵权人libero sodales leo，eget blandit nunc侵权人eu nibh.Nullam mollis.Ut justo.Suspendisse Potentis

Lorem ipsum dolor sit amet，Concertetuer Adipising Elite.Phasellus hendrerit.Pellentsque aliquet Nib nec urna.在nisi neque，aliquet vel，dapibus id，mattis vel，nisi.Sed pretium，ligula sollicitudin Laoret viverra，侵权人Lio，侵权人libero sodales leo，eget blandit nunc侵权人eu nibh.Nullam mollis.Ut justo.Suspendisse Potentis

Lorem ipsum dolor sit amet，Concertetuer Adipising Elite.Phasellus hendrerit.Pellentsque aliquet Nib nec urna.在nisi neque，aliquet vel，dapibus id，mattis vel，nisi.Sed pretium，ligula sollicitudin Laoret viverra，侵权人Lio，侵权人libero sodales leo，eget blandit nunc侵权人eu nibh.Nullam mollis.Ut justo.Suspendisse Potentis

基本上，我有一个额外的页面，其中包含每个菜单链接页面内容的div。当你点击其中一个菜单按钮时，它会从另一个网页（网站本身不可见）中检索其中一个div，并在div中显示ajax ID。因此我想我需要在该div上放置滚动条

编辑：我试图在代码中实现Jscrollpane，但它没有显示…我做错了什么？另外，我还没有在Jscrollpane附带的原始CSS中编辑任何内容，所以这不是问题。

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

您可以尝试使用元素id或类选择器
$（'.element class'）.not（'.scroll wrapper'）.html（内容）更新内容，而不是使用此插件
即使jQuery Scrollbar没有初始化，您也可以安全地使用它

没有任何代码可以通过ajax更改您的内容。您能举个例子吗？我不是要通过ajax更改我的内容，我是在问为什么Jscrollpane Scrollbar没有显示在我的div中。其他代码的所有内容对我来说都是完美的snese，这真是一个问题（菜单）单击div toggle，这是所有为该页面添加的代码，包括与ajax div相关的Jquery。我犯了一个小错误，以为它在主页上，对不起。ajax div没有像您演示的那样上传自己，所以我仍然无法让它工作。我的缺点是没有提供所有必要的代码。希望如此这更好地说明了到底发生了什么以及我应该如何修复this@Juzbeingme但是您确实使用
$（“#ajax”）更新了#ajax内容。load（'slide-fade-content.html'
），因此您确实删除了自定义滚动条。在加载内容后，您应该重新加载jScrollPane。在JSFIDLE中做一个例子，这正是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>