Hello,
Is there a way to handle scroll-click event(s) (up and down) on webViewer?
Thanks
Hello, I’m Ron, an automated tech support bot 
While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:
Guides:- How to use WebViewer with IE9 and IE10?
- Customizing WebViewer UI Popups
- Default UI for WebViewer
- Interacting with WebViewer events - Document and Annotation Rendering - DocumentViewer.pageComplete
I ask bcs I wanted to use Pan Tool, when I am pressing mouse scroll
Hello,
Thank you for contacting us regarding WebViewer.
You could add the native event listener to WebViewer instance, like so:
instance.addEventListener('mousedown', e => {
e.preventDefault();
if (e.which === 2) {
console.log('mousedown instance', e)
}
});
I tested this, and it should be working, however, the ‘click’ event is not triggering on wheel click.
Please let me know how this works for you, and if you have any further questions.
Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com
Thanks, but it didn’t work for me. I’ve receive an error message after implementing that: Unhandled Rejection (TypeError): this.WebViewer.addEventListener is not a function.
Hello,
addEventListener exists in instance of WebViewer not WebViewer itself, you could get instance of Webviewer like so:
Webviewer({
initialDoc: 'filePath',
path: '/lib',
enableFilePicker: true,
}, document.getElementById('viewer')).then((wvInstance) => {
const { documentViewer } = wvInstance.Core;
let wvInstancePointer2 = null;
documentViewer.addEventListener('documentLoaded', ()=>{
wvInstancePointer2 = this.WebViewer.getInstance()
console.log(wvInstance)
console.log(wvInstancePointer2) // this should be the same instance as wvInstance
wvInstancePointer2 .addEventListener('mousedown',(e) =>{
console.log('mousedown wvInstancePointer2 ',e)
})
})
wvInstance.addEventListener('mousedown',(e) =>{
console.log('mousedown wvInstance',e)
})
});
Please let me know how this works for you.
Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com
It’s not working… Could the reason be that I am using older version of lib? 7.2.0
Hello,
If you are using 7.x then on would work, addEventListener was introduced in 8.0:
Webviewer({
initialDoc: 'filePath',
path: '/lib',
enableFilePicker: true,
}, document.getElementById('viewer')).then((wvInstance) => {
const { docViewer } = wvInstance;
let wvInstancePointer2 = null;
docViewer.on('documentLoaded', ()=>{
wvInstancePointer2 = this.WebViewer.getInstance()
console.log(wvInstance)
console.log(wvInstancePointer2) // this should be the same instance as wvInstance
wvInstancePointer2 .addEventListener('mousedown',(e) =>{
console.log('mousedown wvInstancePointer2 ',e)
})
})
wvInstance.addEventListener('mousedown',(e) =>{
console.log('mousedown wvInstance',e)
})
});
Please let me know how this works for you.
Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com
Hey @awejasonhu
actually im able to call mouse scroll event but thing how can i use pan tool by only pressing & holding mouse scroll button and drag mouse to pan… not by dragging with left click…
Ex. Panning in figma by pressing and then dragging mouse scroll button
Hello John,
I think you can call the event handler functions on PanTool, here is the guide:PDFTron.
const { Tools } = instance;
const panMouseDown = Tools.PanTool.prototype.mouseLeftDown;
Tools.PanTool.prototype.mouseLeftDown = function() {
console.log('panMouseDown mouseLeftDown')
panMouseDown.apply(this, arguments);
};
Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com
hey @awejasonhu ,
i guess there’s miss understanding… take a scenario of Figma work space where we can PAN by only pressing and dragging scroll button to pan… is there any method in which i can only press and hold and move mouse to pan the pdf view…
thanks…,
Hello,
Hmm, I see what you are looking for now, you can call the instance of panTool, like so
const {docViewer, Tools} = instance;
docViewer.on('documentLoaded', ()=>{
docViewer.setToolMode(Tools.ToolNames.PAN);
const panTool = docViewer.getTool(Tools.ToolNames.PAN);
docViewer.setToolMode(Tools.ToolNames.EDIT);
instance.addEventListener('mousedown',(e) =>{
e.preventDefault();
if (e.which === 2) {
docViewer.setToolMode(Tools.ToolNames.PAN);
panTool.mouseLeftDown(e)
}
})
instance.addEventListener('mousemove',(e) =>{
e.preventDefault();
if (e.which === 2) {
panTool.mouseMove(e)
}
})
instance.addEventListener('mouseup',(e) =>{
e.preventDefault();
if (e.which === 2) {
panTool.mouseLeftUp(e)
docViewer.setToolMode(Tools.ToolNames.EDIT);
}
})
})
I tested this and it is working, let me know if this fits your needs.
Best Regards,
Jason Hu
Web Development Support Engineer
PDFTron Systems, Inc.
www.pdftron.com
1 Like
hello…!
i am not getting scroll in single page PDF file but getting in multi page PDF can it be possible to get scroll in single page PDF…!!
Hi,
Is this related to the issue in this ticket? You can create a new ticket which can be better handled. Thanks.
Wanbo
Vertical scroll is getting disabled when I am loading the page again or selecting another pdf.
I am using the below code:
instance.setZoomLevel('150%')
var FitMode = instance.FitMode;
instance.setFitMode(FitMode.FitWidth);
const { annotManager, docViewer, Tools } = instance;
docViewer.on("documentLoaded", function () {
instance.setZoomLevel("100%");
});
The page is getting settled automatically to setToPage. Is there any way in which I can get the scroll in single page also with 100% zoom or setToWidth.
It is working fine at the time of creation of instance( i.e. at first time FitWidth is working fine) but when I try to open another file (from a dropdown) it gets set to fitToHeight.
Let me know if there is any other need of clarification. It is bit urgent.