【发布时间】：2022-06-13 10:13:33
【问题描述】：
使用 asScroller 库。文字不显示。 Here's my example
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery asScrollbar</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/asScrollbar.css">
<style type="text/css">
body {
background-color: #f7f7f7;
}
.section {
padding: 20px;
}
.inner {
margin: 0 auto;
max-width: 960px;
}
.example {
position: relative;
overflow: hidden;
padding: 10px;
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;
}
.content-200px-height {
height: 200px;
}
.content-300px-height {
height: 300px;
}
.content-500px-height {
height: 500px;
}
.content-1000px-height {
background-color: rgb(232, 244, 255);
height: 1000px;
}
</style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--[if lt IE 8]>
<p class="browserupgrade">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 class="section">
<div class="inner">
<section>
<h3>Horizontal scrollbar</h3>
<div class="example" style="height: 50px">
<div class="example-scrollbar-horizontal" data-options='{"easing": "ease"}'>
</div>
</div>
<div class="example" style="height: 50px">
<div class="example-scrollbar-horizontal" data-options='{"easing": "ease-in"}'>
</div>
</div>
<div class="example" style="height: 50px">
<div class="example-scrollbar-horizontal" data-options='{"easing": "ease-out"}'>
</div>
</div>
<div class="example" style="height: 50px">
<div class="example-scrollbar-horizontal" data-options='{"easing": "ease-in-out"}'>
</div>
</div>
</section>
<section>
<h3>Vertical scrollbar</h3>
<div class="example" style="height: 300px">
<div class="example-scrollbar-vertical">
<textarea style="overflow-y: scroll; border-radius: 25px;" rows="10" cols="10">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.
</textarea>
</div>
</div>
</section>
<section>
<div>
<button class="api-move-to" data-to="0">Move to 0</button>
<button class="api-move-to" data-to="50">Move to 50</button>
<button class="api-move-to" data-to="0%">Move to 0%</button>
<button class="api-move-to" data-to="100%">Move to 100%</button>
<button class="api-move-to" data-to="50%">Move to 50%</button>
</div>
<div>
<button class="api-move-by" data-by="20">Move by 20</button>
<button class="api-move-by" data-by="+20">Move by +20</button>
<button class="api-move-by" data-by="-20">Move by -20</button>
<button class="api-move-by" data-by="20%">Move by 20%</button>
<button class="api-move-by" data-by="+20%">Move by +20%</button>
<button class="api-move-by" data-by="-20%">Move by -20%</button>
</div>
</section>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery-asScrollbar.js"></script>
<script type="text/javascript">
jQuery(function() {
$('.example-scrollbar-horizontal').asScrollbar({
direction: 'horizontal',
minHandleLength: 200,
handleLength: 100
});
var api = $('.example-scrollbar-horizontal').data('asScrollbar');
$('.api-move-to').on('click', function() {
var to = $(this).data('to');
$('.example-scrollbar-horizontal, .example-scrollbar-vertical').asScrollbar('moveTo', to);
});
$('.api-move-by').on('click', function() {
var to = $(this).data('by');
$('.example-scrollbar-horizontal, .example-scrollbar-vertical').asScrollbar('moveBy', to);
});
$('.example-scrollbar-vertical').asScrollbar({
direction: 'vertical',
handleLength: 100,
maxHandleLength: 100,
mouseDrag: true,
touchDrag: true,
pointerDrag: true,
clickMove: true,
clickMoveStep: 0.2, // 0 - 1
mousewheel: true,
mousewheelSpeed: 50,
keyboard: true,
useCssTransforms3d: true,
useCssTransforms: true,
useCssTransitions: true,
duration: '800',
easing: 'ease' // linear, ease-in, ease-out, ease-in-out
});
});
</script>
</body>
</html>
帮助我用滚动条显示我的文本区域。
【问题讨论】：
标签： javascript html jquery css scroller