# 自定义 PDFViewer ScrollWrap
# ScrollWrap 作用
当显示器无法显示整个PDF文档的所有内容的时候，就需要借助滚动条来显示剩下的文档内容，页面模式中需要计算滚动条的位置信息以及页面触发滚动，通过自定义ScrollWrap就可以支持原生的滚动条以及第三方滚动条插件。
# 示例
# 使用原生的滚动条
使用原生的滚动条需要制定渲染PDFViewer的容器，以及容器的大小，并且设置CSS的overflow为scroll或auto;
<html>
<input type="file" id="file">
<hr>
<div id="pdf-viewer"></div>
<script>
var ePDFViewer = document.getElementById('pdf-viewer');
class MyCustomScrollWrap extends PDFViewCtrl.ScrollWrap {
getScrollHost() {
return ePDFViewer;
}
getScrollOffsetTop () {
return this.viewerRender.$ui[0].offsetTop;
}
getScrollOffsetLeft () {
return this.viewerRender.$ui[0].offsetLeft;
}
getWidth () {
return ePDFViewer.offsetWidth - 30;
}
getHeight () {
return ePDFViewer.offsetHeight;
}
getScrollTop () {
return ePDFViewer.scrollTop;
}
getScrollLeft () {
return ePDFViewer.scrollLeft;
}
}
var viewer = new PDFViewCtrl.PDFViewer({
libPath: window.top.location.origin + '/lib',
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
},
customs: {
ScrollWrap: MyCustomScrollWrap
}
});
viewer.init(ePDFViewer);
document.getElementById('file').onchange = function(e) {
if(!this.value) {
return;
}
viewer.openPDFByFile(e.target.files[0]);
this.value = '';
}
</script>
</html>
<style>
#pdf-viewer {
display: block;
margin: 0 auto;
width: 800px;
height: 600px;
border: 1px solid #ddd;
overflow: scroll;
}
</style>
{
"iframeOptions": {
"injectScript": [
"/lib/PDFViewCtrl.full.js",
"/examples/license-key.js"
],
"injectCss": [
"/lib/PDFViewCtrl.css"
],
"style": "height: 700px"
}
}
# 使用PDFViewer.CustomScrollWrap（7.3.0以后支持）
<html>
<input type="file" id="file">
<hr>
<div id="pdf-viewer"></div>
<script>
var ePDFViewer = document.getElementById('pdf-viewer');
var viewer = new PDFViewCtrl.PDFViewer({
libPath: window.top.location.origin + '/lib',
jr: {
licenseSN: licenseSN,
licenseKey: licenseKey
},
customs: {
ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(ePDFViewer)
}
});
viewer.init(ePDFViewer);
document.getElementById('file').onchange = function(e) {
if(!this.value) {
return;
}
viewer.openPDFByFile(e.target.files[0]);
this.value = '';
}
</script>
</html>
<style>
#pdf-viewer {
display: block;
margin: 0 auto;
width: 800px;
height: 600px;
border: 1px solid #ddd;
overflow: scroll;
}
</style>
{
"iframeOptions": {
"injectScript": [
"/lib/PDFViewCtrl.full.js",
"/examples/license-key.js"
],
"injectCss": [
"/lib/PDFViewCtrl.css"
],
"style": "height: 700px"
}
}