Jscrollpane移動內容
[英]Jscrollpane moving content around
問題描述
我是一名新海報，但在棘手的情況下曾多次使用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>
1 個解決方案
解決方案1
0 已采納 2013-05-03 15:46:02
您可以將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/
將內容拖動到不同的div元素而不移動div本身
[英]dragging content around to different div elements without moving the div itself
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.