开发者

scrollbars rendering on some divs but not others [jScrollPane / jQuery]

开发者 https://www.devze.com 2023-04-04 15:55 出处:网络
I\'m using the jScrollPane plugin to render scrollbars on some divs. My problem is that one of the divs displays its scrollbars fine, whilst the other div not only does not display its\' scrollbars, t

I'm using the jScrollPane plugin to render scrollbars on some divs. My problem is that one of the divs displays its scrollbars fine, whilst the other div not only does not display its' scrollbars, the content inside it is also messed with.

开发者_如何学JAVA

the content inside the div has been rearranged (all <p> at the top, then all <img> then all <h#> etc) and all line breaks and other formatting have been removed. I can't figure out why this would be happening because both divs have exactly the same properties set in the stylesheet for the page.

Is there a common cause of this kind of thing? I initially thought it might be something to do with the misbehaving div containing images so I tried enabling autoReinitialise but I still experience the same problem.

edit, for more content:

the div that is misbehaving is called content. the div that works is called comments. the css for the scrollbars is identical for each - they both reference the same stylesheet.

js:

$(window).load(function() {

         $("#content").jScrollPane(
                    {
                        autoReinitialise: true
                    }
                );

});
$(document).ready(function(){

    //scroll barzzz
    $("#comments").jScrollPane();
});

css:

#content  {
        font-family: Helvetica, Arial, Sans-serif;
        text-align: justify;
        width: 95%;
        height: 350px;
        background-color: #fff;
        padding: 20px;
        opacity: 0.0;
        margin: 10px;
        overflow:auto;
        border-radius: 15px;
        border: solid 1px #eee;

    }
#comments {
        font-family:      Helvetica, Arial, Sans-serif;
        height: 300px;
        width: 90%;
        background-color: #fff;
        padding: 10px 10px 10px 10px;
        opacity: 0.0;
        margin: 10px;
        border-radius: 15px;
        overflow:auto;
        border: solid 1px #eee;

    }


I had a similar problem and it was solved by putting my content inside a <p>-tag. For some reason the jScrollPanel code stopped working when there was content inside the scrollable div that wasn't enclosed by a second block-tag like <p> or <h1>.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号