Question

所以当我点击链接时，我正在尝试更改滚动条。首先，让我告诉你我目前的代码。

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>

激活链接：

<div class="panel_button" style="display: visible;"><a href="#panel">ABOUT<br>THE<br>BLOGGER</a></div>

CSS：

#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; }

所以，当我点击“关于Blogger”时，我想写一些文章最终会溢出，但我似乎无法想到这样做的方法。如果可能，我想将默认滚动条滚动的主要内容更改为“关于Blogger”内容。如果那是不可能的，我想的是内部滚动条我想不出一种执行方式。
如果您希望看到这一点，请转到Niu-Niu.org。
请记住，我是jQuery中的完整新手。我很了解CSS。
谢谢你的期待！

Answer 1

panel_contents是absolute，而非静态。这看起来像一个CSS问题，而不是一个jQuery问题。除非您想使用jQuery根据屏幕大小动态调整面板的高度。为什么不将这个css用于面板？

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

现在面板是窗口的全高度。如果内容大于面板，则滚动。我想你仍然可以使用100％的绝对位置，但你需要将其父级设置为relative，这样它就不会变得太大（这是你当前的问题，加上你没有溢出滚动。）

jQuery Dropdown Scrollbar？

1 个答案: