Need to make space between scroller and text so scroller and text don't overlap. padding-right: 30px not working. Here is HTML:
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery asScrollable</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/asScrollable.css">
<style type="text/css">
body {
background-color: #f7f7f7;
}
.section {
padding: 20px;
}
.inner {
margin: 0 auto;
max-width: 960px;
}
.example {
overflow: hidden;
border: 1px solid #e0e0e0;
-webkit-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
-moz-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
background-color: #fefefe;
}
.box,
.simple {
height: 200px;
}
</style>
</head>
<body>
<!--[if lt IE 8]>
<p >You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div >
<div >
<section>
<h3>Vertical Scrollable</h3>
<div style="padding-right: 30px;"data-options='{"direction": "vertical", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam malesuada at metus eget sodales. Aenean tincidunt mi sed orci sollicitudin placerat. Nullam tempus nisl augue, sed pulvinar eros lacinia vitae. Mauris vehicula velit a nibh dapibus vehicula. Fusce dui tellus, tincidunt sit amet porttitor efficitur, aliquam ac arcu. Cras non tempor dui. Nunc a dolor sit amet dolor bibendum auctor a eu ipsum.</p>
<p>Pellentesque lobortis facilisis risus, sit amet maximus turpis venenatis vitae. Donec nec eros iaculis, congue risus at, tempus augue. Donec quis felis vel purus pretium tincidunt. Integer sodales ultricies tristique. Phasellus et risus sagittis, dictum tortor a, semper lorem. Vivamus quis ipsum velit. Nam molestie ut ipsum ultricies volutpat. Integer molestie sagittis tempor. Integer vitae mauris est. Ut laoreet dignissim tellus, non accumsan erat gravida vel. Curabitur non erat id velit aliquam malesuada. Proin aliquet cursus orci quis pulvinar.</p>
<p>Duis elit massa, scelerisque sed nisl sed, tempus iaculis felis. Duis accumsan eget justo id auctor. Aliquam consequat odio non dolor efficitur, hendrerit porttitor neque porttitor. Integer varius maximus nunc, at malesuada leo tristique id. Sed aliquet pharetra ipsum, non interdum lacus dictum sit amet. Curabitur semper imperdiet sem eget interdum. Nunc at egestas tellus, vel tincidunt lacus. Fusce eget neque vel leo volutpat tincidunt ac non enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus leo in felis viverra interdum.</p>
<p>Mauris id ultricies magna. Quisque rutrum lobortis elit blandit rutrum. Curabitur mattis enim lorem, eget tempor nunc pretium dignissim. Cras tincidunt ac nisl eget finibus. Fusce lobortis turpis sed dui mollis, eget fringilla risus porttitor. In id neque vitae lorem pharetra sodales. Morbi neque ex, mattis at dolor quis, consequat tincidunt leo. Vivamus sagittis placerat sem at porta.</p>
<p>Proin varius arcu ac ligula suscipit, sit amet pretium lectus tincidunt. Aliquam eu mi imperdiet, efficitur tellus ac, mollis eros. Cras malesuada feugiat pharetra. Curabitur lectus lacus, bibendum sed odio at, egestas tempor nisl. Vivamus sagittis est porta velit pretium, in elementum arcu tempus. Ut id cursus libero, non ullamcorper velit. Cras pretium arcu lacus, nec dignissim elit accumsan vitae. Aliquam tristique lorem et tempus congue. Donec vel metus enim. Praesent sed turpis et magna suscipit tincidunt. Proin efficitur neque non sapien cursus vehicula. Suspendisse iaculis, neque vel convallis lobortis, mauris dui posuere mi, at maximus lorem tortor a metus. Ut in quam efficitur, finibus nulla et, feugiat orci.</p>
<p>Sed mattis volutpat enim eget porttitor. Sed lectus ligula, condimentum nec elit eget, vehicula porttitor nunc. Curabitur pulvinar leo velit, a convallis tellus suscipit ac. Donec tempor est ut sagittis varius. Mauris maximus nunc metus, non venenatis justo ornare vel. Phasellus iaculis erat sit amet enim fermentum mattis. Cras sollicitudin tortor dolor, ac aliquam dolor iaculis non. Donec sed sodales enim. Suspendisse potenti. Integer quis turpis cursus enim consectetur fringilla eu eu ante.</p>
</div>
</div>
</div>
</section>
<section>
<h3>Horizontal Scrollable</h3>
<div data-options='{"direction": "horizontal", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/1500x200/sky" width="2000" />
</div>
</div>
</div>
</section>
<section>
<h3>Both Scrollable</h3>
<div data-options='{"direction": "both", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/1500x400/sky" width="1500" height="400" />
</div>
</div>
</div>
</section>
<section>
<h3>Both Scrollable With No scroll</h3>
<div data-options='{"direction": "both", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/100%x200/lava" width="100%" height="200" />
</div>
</div>
</div>
</section>
<section>
<h3>Auto x</h3>
<div style="overflow-x: auto; overflow-y: hidden" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/1200x200/vine" width="1200" height="200" />
</div>
</div>
</div>
</section>
<section>
<h3>Auto y</h3>
<div style="overflow-y: auto; overflow-x: hidden" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/958x300/vine" width="958" height="300" />
</div>
</div>
</div>
</section>
<section>
<h3>Auto both</h3>
<div style="overflow: auto" data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/1200x300/vine" width="1200" height="300" />
</div>
</div>
</div>
</section>
<section>
<h3>Auto none</h3>
<div data-options='{"direction": "auto", "contentSelector": ">", "containerSelector": ">"}'>
<div>
<div>
<img data-src="holder.js/958x200/lava" width="958" height="200" />
</div>
</div>
</div>
</section>
<section>
<h3>Simple Structure</h3>
<div >
<div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam malesuada at metus eget sodales. Aenean tincidunt mi sed orci sollicitudin placerat. Nullam tempus nisl augue, sed pulvinar eros lacinia vitae. Mauris vehicula velit a nibh dapibus vehicula. Fusce dui tellus, tincidunt sit amet porttitor efficitur, aliquam ac arcu. Cras non tempor dui. Nunc a dolor sit amet dolor bibendum auctor a eu ipsum.</p>
<p>Pellentesque lobortis facilisis risus, sit amet maximus turpis venenatis vitae. Donec nec eros iaculis, congue risus at, tempus augue. Donec quis felis vel purus pretium tincidunt. Integer sodales ultricies tristique. Phasellus et risus sagittis, dictum tortor a, semper lorem. Vivamus quis ipsum velit. Nam molestie ut ipsum ultricies volutpat. Integer molestie sagittis tempor. Integer vitae mauris est. Ut laoreet dignissim tellus, non accumsan erat gravida vel. Curabitur non erat id velit aliquam malesuada. Proin aliquet cursus orci quis pulvinar.</p>
<p>Duis elit massa, scelerisque sed nisl sed, tempus iaculis felis. Duis accumsan eget justo id auctor. Aliquam consequat odio non dolor efficitur, hendrerit porttitor neque porttitor. Integer varius maximus nunc, at malesuada leo tristique id. Sed aliquet pharetra ipsum, non interdum lacus dictum sit amet. Curabitur semper imperdiet sem eget interdum. Nunc at egestas tellus, vel tincidunt lacus. Fusce eget neque vel leo volutpat tincidunt ac non enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus leo in felis viverra interdum.</p>
<p>Mauris id ultricies magna. Quisque rutrum lobortis elit blandit rutrum. Curabitur mattis enim lorem, eget tempor nunc pretium dignissim. Cras tincidunt ac nisl eget finibus. Fusce lobortis turpis sed dui mollis, eget fringilla risus porttitor. In id neque vitae lorem pharetra sodales. Morbi neque ex, mattis at dolor quis, consequat tincidunt leo. Vivamus sagittis placerat sem at porta.</p>
<p>Proin varius arcu ac ligula suscipit, sit amet pretium lectus tincidunt. Aliquam eu mi imperdiet, efficitur tellus ac, mollis eros. Cras malesuada feugiat pharetra. Curabitur lectus lacus, bibendum sed odio at, egestas tempor nisl. Vivamus sagittis est porta velit pretium, in elementum arcu tempus. Ut id cursus libero, non ullamcorper velit. Cras pretium arcu lacus, nec dignissim elit accumsan vitae. Aliquam tristique lorem et tempus congue. Donec vel metus enim. Praesent sed turpis et magna suscipit tincidunt. Proin efficitur neque non sapien cursus vehicula. Suspendisse iaculis, neque vel convallis lobortis, mauris dui posuere mi, at maximus lorem tortor a metus. Ut in quam efficitur, finibus nulla et, feugiat orci.</p>
<p>Sed mattis volutpat enim eget porttitor. Sed lectus ligula, condimentum nec elit eget, vehicula porttitor nunc. Curabitur pulvinar leo velit, a convallis tellus suscipit ac. Donec tempor est ut sagittis varius. Mauris maximus nunc metus, non venenatis justo ornare vel. Phasellus iaculis erat sit amet enim fermentum mattis. Cras sollicitudin tortor dolor, ac aliquam dolor iaculis non. Donec sed sodales enim. Suspendisse potenti. Integer quis turpis cursus enim consectetur fringilla eu eu ante.</p>
</div>
</div>
</div>
</section>
<section>
<div>
<button data-to="0">Scroll to 0</button>
<button data-to="50">Scroll to 50</button>
<button data-to="0%">Scroll to 0%</button>
<button data-to="100%">Scroll to 100%</button>
<button data-to="50%">Scroll to 50%</button>
</div>
<div>
<button data-by="10">Scroll by 10</button>
<button data-by=" 10">Scroll by 10</button>
<button data-by="-10">Scroll by -10</button>
<button data-by="10%">Scroll by 10%</button>
<button data-by=" 10%">Scroll by 10%</button>
<button data-by="-10%">Scroll by -10%</button>
</div>
<div>
<button >Init</button>
<button >enable</button>
<button >disable</button>
<button >Destroy</button>
</div>
</section>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/holder.js"></script>
<script src="js/jquery-asScrollbar.js"></script>
<script src="js/jquery-asScrollable.js"></script>
<script type="text/javascript">
jQuery(function($) {
Holder.run();
$('.box').asScrollable();
$('.simple').asScrollable({
contentSelector: ">",
containerSelector: ">"
});
$('.box').on('asScrollable::scrolltop', function(e, api, direction) {
console.info('top:' direction);
});
$('.box').on('asScrollable::scrollend', function(e, api, direction) {
console.info('end:' direction);
});
$('.api-scroll-to').on('click', function() {
var to = $(this).data('to');
$('.simple').asScrollable('scrollTo', 'vertical', to);
$('.simple').asScrollable('scrollTo', 'horizontal', to);
});
$('.api-scroll-by').on('click', function() {
var to = $(this).data('by');
$('.simple').asScrollable('scrollBy', 'horizontal', to);
$('.simple').asScrollable('scrollBy', 'vertical', to);
});
$('.api-init').on('click', function() {
$('.simple').asScrollable({
contentSelector: ">",
containerSelector: ">"
});
});
$('.api-enable').on('click', function() {
$('.simple').asScrollable('enable');
});
$('.api-disable').on('click', function() {
$('.simple').asScrollable('disable');
});
$('.api-destroy').on('click', function() {
$('.simple').asScrollable('destroy');
});
});
</script>
</body>
</html>
Here is the example. Please help.
Thanks
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
CodePudding user response：
@Nate. Please add below style.
.asScrollable-content {
box-sizing: border-box;
padding-right: 30px;
}
It's due to box-sizing property. Hope this helps. Happy coding~ :)
CodePudding user response：
I tried this on your vertical scrollable section and i think it did what you wanted.
Set a padding of your liking to the div after h3 vertical scrollable
and for the asScrollable-container div take off the width: 975px;
and the text should be able to scale with the padding you want and the scrollbar will not overlap with the text