jQuery下拉滚动条？

所以当我点击一个链接时，我试图改变滚动条。首先，让我向您展示我当前的代码。 jQuery:

$(document).ready(function() {
    $("div.panel_button").click(function(){
        $("div#panel").animate({
            height: "100%"
        })



    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px"
        }, "fast");


   });  

});

实施：

 <div id="panel"> 
<div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">X</a></div>
  <div id="panel_contents">
There was a really long bit of text here. This will eventually overflow.
</div> 
</div></div>

所以，当我点击“关于博主”时，我想多写一点，这样文本最终会溢出，但我似乎想不出一个方法来做到这一点。如果可能，我想将默认滚动条滚动的主要内容更改为“关于博主”内容。如果这不可能，我正在考虑一个内部滚动条。
我也想不出执行的方法
如果您希望看到此内容，请转到
请记住，我是jQuery的新手。我对CSS很熟悉

---

谢谢你的关注

面板内容是绝对的，而不是静态的。这看起来像是CSS问题，而不是jQuery问题。除非您想使用jQuery根据屏幕大小动态调整面板的高度。为什么不将此css用于面板呢

position: fixed;
top: 0px;
right: 30px;
width: 400px;
height: 100%; 
overflow: scroll;

---

现在面板是窗口的全高。如果内容大于面板，则滚动。我想您仍然可以使用position absolute和100%，但您需要将其父级设置为

relative

，这样它就不会变得太大（这是您当前的问题，加上您没有溢出卷轴。）

您的问题让我有点困惑。链接是伟大的开始。当有人点击关于博主的

时

你到底想发生什么？你想要一个有自己滚动条的覆盖图吗？您还想禁用页面的滚动条吗？否。当文本超过屏幕高度时，我希望它溢出并有一个滚动条。但是因为它是静态的，我不能改变静态的，否则代码会被弄乱，它就会被切断。我如何解决这个问题以使内容滚动？

#panel {
margin-top: 0px;
margin-left: 48%;
width: 48%;
z-index: 25;
text-align: center;
background-color: #efefef;
position: relative;
height: 0px;
z-index: 10;
overflow: hidden;
text-align: left;
position: fixed; } /* drop down color */

#panel_contents {
font: normal 80%/190% arial;
line-height: 190%;
padding: 5%;
height: 100%;
width: 80%;
padding-top: 1% !important;
position: absolute;
padding-left: 12% !important;
z-index: -1; } /* drop down color */

.panel_button1 a { /* About the Blogger */
text-decoration: none;
color: #888;
font-size: 240%;
font-family: arial;
padding: 1%; 
-webkit-transition: all .9s ease; 
-moz-transition: all .9s ease; 
transition: all .9s ease; } /* for the exit button */

.panel_button1 a:hover {
color: #F58932; }   /* for the exit button */

.panel_button {
list-style-type: none;
list-style-image: none;
list-style: none;
width: 50%;
position: relative;
top: -160px; } /* for the nav styling */

.panel_button a {
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
transition: all 1s ease;
background: #F5A564;
color: #F5CBAF;
display: block;
font-size: 255%;
height: 160px;
text-decoration: none; } 
/* nav styling */

.panel_button a:hover {
background: #808080;
color: #FFFFFF; }

position: fixed;
top: 0px;
right: 30px;
width: 400px;
height: 100%; 
overflow: scroll;