# 自定义 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"
    }
}