我是一名新发帖人，但在棘手的情况下多次使用 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">©</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>
最佳答案
能否将 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>
fiddle :http://jsfiddle.net/H5nVy/1/
关于jquery - Jscrollpane 移动内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16361445/