scrollMode Property

Summary

Determines how the control handles scrollbars when the current transformation results in the view area being larger than the control.

Syntax
TypeScript
JavaScript
Object.defineProperty(ImageViewer.prototype, 'scrollMode', 
	get: function(), 
	set: function(value) 
) 
scrollMode: ControlScrollMode; 

Property Value

The scroll mode. The default value is ControlScrollMode.Auto.

Remarks

Changing the value of this property will fire the PropertyChanged and TransformChanged events.

The size of the view area can become larger or smaller than the control size, depending on the size of the items inside the viewer, the view layout, and current transformation. In this case, the control can be required to show or hide scrollbars and determine how to handle panning.

As in the case of any scrolling model, the value of the current scroll offset and the size of the maximum scroll area should be available to query and change. These are stored in the ScrollOffset and MaximumScrollSize properties of this control.

The value of RestrictScroll determines what to do when the user tries to pan the image outside the maximum scroll area (MaximumScrollSize) if the scroll mode was set to ControlScrollMode.Hidden.

Use the value of ScrollMode to determine how the control handles the scrollbars:

Value Description
ControlScrollMode.Auto

This instructs the control to use actual platform scrollbars. The viewer will show and hide the scrollbars depending on the transformation and image size value. This is the default behavior. The value of RestrictScroll is not used in this case, and the user cannot pan outside the maximum scroll area. You can manually scroll and pan the image from 0,0 to the maximum allowed (MaximumScrollSize), by using ScrollOffset or ScrollBy.

Note: Some platforms, such as mobile and tablet browsers, do not support scrollbars. On these platforms, ControlScrollMode.Auto will not actually show any scroll bars. Instead, it will have the same behavior as setting ScrollMode to ControlScrollMode.Hidden and RestrictScroll to true.
ControlScrollMode.Hidden
This instructs the control to enable scrolling without the use of actual scrollbars. The viewer will not show the scrollbars no matter what the transformation value is. You can still manually scroll and pan the image from 0,0 to the maximum allowed (MaximumScrollSize) by using ScrollOffset or ScrollBy. Or if desired, set the value of RestrictScroll to true and scroll or pan the image to any value without restriction.
ControlScrollMode.Disabled
This instructs the viewer to disable scrolling completely. Scrollbars will never be visible regardless of the current transformations and image sizes, and any values set into ScrollOffset or passed to ScrollBy will be ignored. Setting RestrictScroll is not used.

The value of RestrictScroll controls what happens if the user tries to scroll or pan outside the range. When the value of RestrictScroll is true (the default), the user cannot scroll/pan outside the maximum range. This works just like ControlScrollMode.Auto, but without visible scrollbars. If the value of RestrictScroll is set to false, then the user is allowed unlimited panning and scrolling, any value in ScrollOffset or ScrollBy can be used (negative values, very large values). This might be useful in some situations like a mapping or medical application.

Note: Changing the value of ScrollMode might affect the value of ScrollOffset. For example, if the scroll mode is ControlScrollMode.Hidden with RestrictScroll set to false and the user has panned the image outside the maximum scrolling area, which is legal in this case. Now, if ScrollMode is set to ControlScrollMode.Auto, the scroll offset cannot be outside the maximum scrolling area, and the viewer will change the value of ScrollOffset to the closest legal value for the current mode. This is also applicable when the user changes the value of RestrictScroll from false back to true.

For more information, refer to Image Viewer Scrolling.

Example

This demo will add a button to toggle between the different scroll modes to show their differences.

ScrollMode.ts
ImageViewer.ts
ScrollMode.js
ImageViewer.js
ScrollMode.html
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ScrollModeExample { 
   private viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   private run = (viewer: lt.Controls.ImageViewer) => { 
      // Zoom in so we can see scroll bars for the example 
      viewer.zoom(1.5, lt.Controls.ControlSizeMode.fit, viewer.defaultZoomOrigin); 
 
      const scrollModes = ["Auto", "Hidden", "Disabled"]; 
      const output = document.getElementById("output"); 
      const textOutput = document.createElement("p"); 
      output.appendChild(textOutput); 
 
      const updateOutput = () => { 
         textOutput.innerHTML = "ScrollMode: " + scrollModes[viewer.scrollMode]; 
      } 
      updateOutput(); 
 
      // Add a button to update the scroll mode 
      const button = document.createElement("button"); 
      button.innerHTML = "Change Scroll Mode"; 
      button.onclick = () => { 
         // Flip through the options 
         viewer.scrollMode = (viewer.scrollMode + 1) % scrollModes.length; 
 
         // Allow movement all over the view while we're at it when hidden 
         if (viewer.scrollMode === lt.Controls.ControlScrollMode.hidden) 
            viewer.restrictScroll = false; 
         else 
            viewer.restrictScroll = true; 
 
         updateOutput(); 
      }; 
      output.appendChild(button); 
   } 
} 
export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   protected imageViewer: lt.Controls.ImageViewer = null; 
   // Generic state value used by the examples 
   public timesClicked: number = 0; 
 
   constructor(callback?: (viewer: lt.Controls.ImageViewer) => void) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions: lt.Controls.ImageViewerCreateOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 
import { ImageViewer_Example } from "../ImageViewer"; 
 
export class ImageViewer_ScrollModeExample { 
   viewerExample; 
   constructor() { 
      this.viewerExample = new ImageViewer_Example(this.run); 
   } 
 
   run = (viewer) => { 
      // Zoom in so we can see scroll bars for the example 
      viewer.zoom(1.5, lt.Controls.ControlSizeMode.fit, viewer.defaultZoomOrigin); 
 
      const scrollModes = ["Auto", "Hidden", "Disabled"]; 
      const output = document.getElementById("output"); 
      const textOutput = document.createElement("p"); 
      output.appendChild(textOutput); 
 
      const updateOutput = () => { 
         textOutput.innerHTML = "ScrollMode: " + scrollModes[viewer.scrollMode]; 
      } 
      updateOutput(); 
 
      // Add a button to update the scroll mode 
      const button = document.createElement("button"); 
      button.innerHTML = "Change Scroll Mode"; 
      button.onclick = () => { 
         // Flip through the options 
         viewer.scrollMode = (viewer.scrollMode + 1) % scrollModes.length; 
 
         // Allow movement all over the view while we're at it when hidden 
         if (viewer.scrollMode === lt.Controls.ControlScrollMode.hidden) 
            viewer.restrictScroll = false; 
         else 
            viewer.restrictScroll = true; 
 
         updateOutput(); 
      }; 
      output.appendChild(button); 
   } 
} 
export class ImageViewer_Example { 
   // LEADTOOLS ImageViewer to be used with this example 
   imageViewer = null; 
   // Generic state value used by the examples 
   timesClicked = 0; 
 
   constructor(callback) { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
 
      // Create an image viewer inside the imageViewerDiv element 
      const imageViewerDiv = document.getElementById("imageViewerDiv"); 
      const createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv); 
      this.imageViewer = new lt.Controls.ImageViewer(createOptions); 
      this.imageViewer.viewVerticalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.viewHorizontalAlignment = lt.Controls.ControlAlignment.center; 
      this.imageViewer.autoCreateCanvas = true; 
 
      // Add Pan/Zoom interactive mode 
      // Click and drag to pan, CTRL-Click and drag to zoom in and out 
      this.imageViewer.interactiveModes.add(new lt.Controls.ImageViewerPanZoomInteractiveMode()); 
 
      // Load an image 
      this.imageViewer.imageUrl = "https://demo.leadtools.com/images/jpeg/cannon.jpg"; 
 
      this.imageViewer.zoom(lt.Controls.ControlSizeMode.fit, .9, this.imageViewer.defaultZoomOrigin); 
 
      const exampleButton = document.getElementById("exampleButton"); 
      exampleButton.addEventListener("click", () => { 
         this.timesClicked++; 
         // Run the example 
         if (callback) 
            callback(this.imageViewer); 
      }); 
   } 
} 
<!doctype html> 
<html lang="en"> 
<title>Controls Example | ScrollMode</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.js"></script> 
   <script src="../../LT/Leadtools.Controls.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Engine.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Designers.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Rendering.Javascript.js"></script> 
   <script src="../../LT/Leadtools.Annotations.Automation.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Main.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Color.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Core.js"></script> 
   <script src="../../LT/Leadtools.ImageProcessing.Effects.js"></script> 
   <script src="../../LT/Leadtools.Document.js"></script> 
   <script src="../../LT/Leadtools.Document.Viewer.js"></script> 
   <style> 
      body { 
         font-family: 'Segoe UI', sans-serif; 
      } 
 
      #imageViewerDiv { 
         border: 1px solid #888; 
         width: 500px; 
         height: 500px; 
         background-color: #eee; 
      } 
   </style> 
 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</head> 
 
<body> 
   <p>Press and drag on the image to pan.</p> 
   <p>Hold down the control key and press and drag on the image or pinch with two fingers to zoom in and out.</p> 
   <div> 
      <button type="button" id="exampleButton">Run Example</button> 
   </div> 
   <div id="imageViewerDiv"></div> 
   <div id="output"></div> 
</body> 
 
<script> 
   window.onload = () => { 
      const example = new window.examples.ImageViewer.ScrollMode(); 
 
   }; 
</script> 
</html> 

Requirements

Target Platforms

Help Version 20.0.2020.4.3
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2020 LEAD Technologies, Inc. All Rights Reserved.

Leadtools.Controls Assembly