私は新しい投稿者ですが、困難な状況での助けとして Staockoverflow を何度も使用してきましたが、今回は多くの検索と髪の引っ張りの後、投稿する必要があると思います。
私は Jscrollpane を使用して、非常に基本的なサイトのスクロール バーのスタイルを設定しています。長い間、div の横にデフォルトのスクロールバーが表示されていましたが、jscrollpane コードを追加すると消えてしまいました。コードの作業に何年も費やしましたが、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>
