Question

我是一张新的海报，但在棘手的情况下曾多次使用Staockoverflow寻求帮助，但这次经过多次搜索和拔毛之后，我想我需要发帖。

我正在使用Jscrollpane为非常基本的网站上的滚动条设置样式。多年来，我的div侧面有一个默认的滚动条，但是当我添加了jscrollpane代码时，它就消失了。我花了很长时间来处理我的代码，事实证明问题是我的div中的内容太长了。这对于默认滚动条很好，但是使用Jscrollpane它只是不起作用。结果我拿出了一些内容并且它有效但是有一个新问题 - 如果我只有一点内容，那么一切都很好，但如果我有相当数量的内容，那么最终内容将被推到顶部div虽然开始的内容和滚动条本身实际上开始在div的底部附近！我不太确定如何解决这个问题，如果有任何帮助，我将不胜感激。此外，如果你知道如何使用Jscrollpane我想要的任何长度内容，这将是最好的选择，因为我真的需要这个div中的很多内容！

提前致谢

下面是一些图片来帮助解释

此外，我的代码目前是直接从jscrollpane网站下载的默认jScrollPane.js代码，我只是使用它来调用它：

<script type="text/javascript">
$(function()
{
    $('#ts_and_cs').jScrollPane();
});

</script>

其中#ts_and_cs是我的条款和条件div，我想要使用滚动条。正如我所说，只要内容很短，代码就能正常工作，所以我只需要一种方法来启用它以允许更长的内容。谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>South African shop Tunbridge wells - The Baobab - Terms and conditions of website use</title>

<meta name="description" content="The Baobab Tunbridge Wells are purveyors of South African and Southern African food and produce. We invite you to use our website to find out more about what we have to offer and where we are but please use the site in accordance we these terms and conditions. Thank you and we hope to see you soon."/>


<meta name="rating" content="General" />
<meta name="revisit-after" content="14 days" />
<meta name="ROBOTS" content="All" />


<meta name="author" content="Smokescreen Creative" />

<link rel="icon" href="http://www.the-baobab.co.uk/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="shortcut icon" href="http://www.the-baobab.co.uk/favicon.ico" type="image/vnd.microsoft.icon" />



<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

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

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

<script type="text/javascript">
$(function()
{
    $('#ts_and_cs').jScrollPane();
});

</script>





  <style>
  * {
  margin: 0;
  padding: 0;
}

html{
scrollbar-face-color: #aeae68;  
}





     body {
height: 100%;
background-image:url(../../website%20background%20image.png);
background-size: 100% auto;
background-attachment:scroll;
background-repeat:no-repeat;
background-color: #d6d29f;
overflow-y: auto;
z-index:1;
font-family: 'idolwild';
color:#fefefe;
font-size:1em;



}

ul
{
    list-style-type: none;
}
a:link {text-decoration:none; color:#fefefe;}      /* unvisited link */
a:visited {text-decoration:none; color:#fefefe;}  /* visited link */
a:hover {text-decoration:none; color:#fefefe;}  /* mouse over link */
a:active {text-decoration:none; color:#fefefe;}  /* selected link */


@font-face {
    font-family: 'idolwild';
    src: local ('!');
    src: url(website/root/fonts/idolwild/idolwild-webfont.eot) format('embedded-opentype'), /* IE6-IE8 */
         url (website/root/fonts/idolwild/idolwild-webfont.woff) format('woff'), /* Modern Browsers */
         url(website/root/fonts/idolwild/idolwild-webfont.ttf)  format('truetype'), /* Safari, Android, iOS */
         url(website/root/fonts/idolwild/idolwild-webfont.svg#svgFontName) format('svg'); /* Legacy iOS */
    }

#container{

    width: 100%;
    /*padding-bottom:47%;*/ /*this is used instead of height and overflow below to make text divs move vertically in proportion with resizing browser window as well as horizontally. Current code moves text horizontally in proportion to percentage of browser width but leaves vertical position unchanged.*/ 
    height:643px;
    position:relative;
    overflow-x:hidden;
    overflow-y:hidden;


}

#show_scrollbar{
height: 643px;  
width: 1px;

float:right;
display:inline-block;
}



#logo {

position:absolute;
display:block;
top:0%;
left:0%;


width:100%;
height:30%;

}

#ts_and_cs {
    position:absolute;
display:block;
margin-top: 5px;

top:33%;
left:5.7%;
font-weight:normal;
font-size:1em;
text-align:center;
width: 50%;
height:60%;
overflow-y: scroll;

}



#marcs_foods {

position:absolute;
display:block;
margin-top: 5px;
top:93.1%;
left:1.1%;
font-weight:normal;
font-size:0.85em;
text-align:left;

}


#copyright {

position:absolute;
display:inline-block;
margin-top: 5px;
top:93.1%;
left:34.5%;
font-weight:normal;
font-size:1em;
text-align:center;

}





#designed_by{
    position:absolute;
display:inline-block;
margin-top: 5px;
top:92%;
left:83.3%;
font-weight:normal;
font-size:1.2em;
text-align:center;

}



img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}



</style>


 </head>


 <body>
 <div id="container">
 <div id="logo">
<a href="http://www.the-baobab.co.uk"><img id="header" src="images/baobab logo header.png" alt="The Baobab Tunbridge wells South African shop home page link" style="border:none;" /></a>
</div>


 <div id="ts_and_cs">



<p>Terms of Website Use - Privacy Policy - Acceptable Use Policy<br/><br/>
<span style="text-decoration:underline">Terms of Website Use</span><br/><br/>
This page (together with the documents referred to on it) tells you the terms of use on which you may make use of our website www.the-baobab.co.uk (our site), whether as a guest or a registered user. Please read these terms of use carefully before you start to use the site. By using our site, you indicate that you accept these terms of use and that you agree to abide by them. If you do not agree to these terms of use, please refrain from using our site.<br/><br/>
Information about us<br/><br/>
www.the-baobab.co.uk is a site operated by Marc's Foods (We).  We are registered in England and Wales and have our registered office at 90 Camden Road, Tunbridge Wells, Kent, TN1 2QP. <br/><br/>
Accessing our site<br/><br/>
Access to our site is permitted on a temporary basis, and we reserve the right to withdraw or amend the service we provide on our site without notice (see below). We will not be liable if for any reason our site is unavailable at any time or for any period.<br/><br/>
From time to time, we may restrict access to some parts of our site, or our entire site, to users who have registered with us.
If you choose, or you are provided with, a user identification code, password or any other piece of information as part of our security procedures, you must treat such information as confidential, and you must not disclose it to any third party. We have the right to disable any user identification code or password, whether chosen by you or allocated by us, at any time, if in our opinion you have failed to comply with any of the provisions of these terms of use.<br/><br/>
When using our site, you must comply with the provisions of our acceptable use policy www.the-baobab.co.uk/terms_and_conditions.<br/><br/>
You are responsible for making all arrangements necessary for you to have access to our site.  You are also responsible for ensuring that all persons who access our site through your internet connection are aware of these terms, and that they comply with them.  <br/><br/>
Intellectual property rights<br/><br/>
We are the owner or the licensee of all intellectual property rights in our site, and in the material published on it.  Those works are protected by copyright laws and treaties around the world.  All such rights are reserved. <br/>
You may print off one copy, and may download extracts, of any page(s) from our site for your personal reference and you may draw the attention of others within your organisation to material posted on our site. <br/>
You must not modify the paper or digital copies of any materials you have printed off or downloaded in any way, and you must not use any illustrations, photographs, video or audio sequences or any graphics separately from any accompanying text. 
Our status (and that of any identified contributors) as the authors of material on our site must always be acknowledged. 
You must not use any part of the materials on our site for commercial purposes without obtaining a licence to do so from us or our licensors.<br/>
If you print off, copy or download any part of our site in breach of these terms of use, your right to use our site will cease immediately and you must, at our option, return or destroy any copies of the materials you have made.<br/><br/>
Reliance on information posted<br/><br/>
Commentary and other materials posted on our site are not intended to amount to advice on which reliance should be placed.  We therefore disclaim all liability and responsibility arising from any reliance placed on such materials by any visitor to our site, or by anyone who may be informed of any of its contents. <br/><br/>
Our site changes regularly
We aim to update our site regularly, and may change the content at any time. If the need arises, we may suspend access to our site, or close it indefinitely. Any of the material on our site may be out of date at any given time, and we are under no obligation to update such material. <br/><br/>
Our liability<br/><br/>
The material displayed on our site is provided without any guarantees, conditions or warranties as to its accuracy. To the extent permitted by law, we, other members of our group of companies and third parties connected to us hereby expressly exclude:<br/>
All conditions, warranties and other terms which might otherwise be implied by statute, common law or the law of equity.
Any liability for any direct, indirect or consequential loss or damage incurred by any user in connection with our site or in connection with the use, inability to use, or results of the use of our site, any websites linked to it and any materials posted on it, including, without limitation any liability for:
<ul>
<li>loss of income or revenue;</li>
<li>loss of business;</li>
<li>loss of profits or contracts;</li>
<li>loss of anticipated savings;</li>
<li>loss of data;</li>
<li>loss of goodwill;</li>
<li>wasted management or office time; and</li>
<li>for any other loss or damage of any kind, however arising and whether caused by tort (including negligence), breach of contract or otherwise, even if foreseeable, provided that this condition shall not prevent claims for loss of or damage to your tangible property or any other claims for direct financial loss that are not excluded by any of the categories set out above.</li>
</ul>
This does not affect our liability for death or personal injury arising from our negligence, nor our liability for fraudulent misrepresentation or misrepresentation as to a fundamental matter, nor any other liability which cannot be excluded or limited under applicable law.<br/><br/>
Information about you and your visits to our site<br/><br/>
We process information about you in accordance with our privacy policy www.the-baobab.co.uk/terms_and_conditions.  By using our site, you consent to such processing and you warrant that all data provided by you is accurate. <br/><br/>
Uploading material to our site<br/><br/>
Whenever you make use of a feature that allows you to upload material to our site, or to make contact with other users of our site, you must comply with the content standards set out in our acceptable use policy www.the-baobab.co.uk/terms_and_conditions.  You warrant that any such contribution does comply with those standards, and you indemnify us for any breach of that warranty.<br/>
Any material you upload to our site will be considered non-confidential and non-proprietary, and we have the right to use, copy, distribute and disclose to third parties any such material for any purpose. We also have the right to disclose your identity to any third party who is claiming that any material posted or uploaded by you to our site constitutes a violation of their intellectual property rights, or of their right to privacy.<br/>
We will not be responsible, or liable to any third party, for the content or accuracy of any materials posted by you or any other user of our site.<br/>
</p>


 </div>

<div id="marcs_foods">
<p>
Marc Burnton//Sole trader<br/>
Trading as 'Marc's Foods'
</p>
</div>


<div id="copyright">
<P><span style="font-size:1.2em">&copy;</span> Copyright Marc's Foods <script type="text/javascript">
var theDate=new Date()
document.write(theDate.getFullYear())
</script> - <a href="terms_and_conditions.html" target="_blank">Terms & Conditions</a></P>
<p> <span style="font-size:0.8em">Registered office - 90 Camden Road, Tunbridge Wells, Kent, TN1 2QP</span></p>
</div>


<div id="designed_by">
<p>Designed by<br/>
<a href="http://www.smokescreencreative.co.uk" target="_blank">Smokescreen Creative</a></p>
</div>



<div id="show_scrollbar">
</div>
 </div>

</body>


</html>

This is what happens when there is too much text in the div but not an excessive amount, when there's too much no scroll bar shows up at all

This is what I would like to happen no matter how much text is in the div

Answer 1

你能把CSS放在外部文件中并在javascript之前加载吗？这不仅是一种良好的做法，而且显然jsp也存在问题，如下所述：http://jscrollpane.kelvinluck.com/known_issues.html

然而，问题的真正答案是将您的内容包装在另外的div中：

<div id="ts_and_cs">
<div id="innerConent">...THIS IS WHERE YOU PUT CONTENT...</div>
</div>

小提琴：http://jsfiddle.net/H5nVy/1/

Jscrollpane移动内容

1 个答案: