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