Question

我有一个包含两个p元素的div。当没有css应用于p元素时，jScrollPane工作正常，但我想给出这两个不同的max-height值。一旦我这样做，jScrollPane就会填满整个侧栏并且不会滚动。我终于意识到这是问题，但不知道如何解决它。

标准滚动条仍适用于最大高度设置。

overflow-y: auto;

... CSS

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

<script> 
$(document).ready(function(){
    $(".outer").jScrollPane();

});
</script>
<link href="style2.css" type="text/css" rel="stylesheet" />
<link href="jscrollpane.css" type="text/css" rel="stylesheet" />    


</head>
<body>
<div class="outer">

<p class="p1">Humpty Dumpty sat on a wall
Humpty Dumpty had a big fall
All the king's horses
And all the king's men
Couldn't put Humpty together again
    </p>

<p class="p2">Can Humpty Dumpty recover for his injuries considering the fact that he had a skull as 
thin as an egg shell, which is not normal for human beings? Yes! The law of personal injury 
in a nutshell (not to be confused with egg shell) makes persons who are negligent, liable 
for injuries that they cause that are reasonably foreseeable. The case law on the subject 
has concluded that it is reasonably foreseeable that persons who are injured may have 
pre-existing conditions, or deformities, and that a negligent person must take the injured 
person as they find them. Hence Humpty Dumpty is entitled to a recovery eventhough is head 
is as thin as an egg shell.
    </p>
    </div>
</body>
</html>

感谢您的帮助。

Answer 1

使用Pure CSS方法是不可能的，但使用JS，您可以实现您在评论中提到的内容。

想要隐藏p2，只有在点击p1时才显示它。
p1永远不会溢出，而p2可能。
两个p元素的组合高度有限。

HTML

<div class="outer">
    <p class="p1">
        Humpty Dumpty sat on a wall Humpty Dumpty had a big fall
        All the king's horses
        And all the king's men
        Couldn't put Humpty together again
    </p>

    <p class="p2">
        Can Humpty Dumpty recover for his injuries considering the fact that he had a skull as 
        thin as an egg shell, which is not normal for human beings? Yes! The law of personal injury 
        in a nutshell (not to be confused with egg shell) makes persons who are negligent, liable 
        for injuries that they cause that are reasonably foreseeable. The case law on the subject 
        has concluded that it is reasonably foreseeable that persons who are injured may have 
        pre-existing conditions, or deformities, and that a negligent person must take the injured 
        person as they find them. Hence Humpty Dumpty is entitled to a recovery eventhough is head 
        is as thin as an egg shell.
    </p>
</div>

CSS中的更改，从max-height个元素中移除<p>

.outer {
   width: 250px;
}
 .p1 {

}
 .p2 {

}

按以下方式更改JS

$(document).ready(function(){
    var height = $('.outer p').height();

    $('.outer').css({'height' : height});
    $('.outer').jScrollPane({

    });
});

上面的JS代码根据第一个outer元素调整<p> css选择器的高度，并且它是动态的，更多内容添加或从第一个<p>元素移除高度调整自身第二个<p>元素将保持隐藏状态，仅在滚动时显示。

Fiddle

当<p>给定高度值时，jQuery jScrollPane在<div>上不起作用

1 个答案: