ScrollMode Property

Gets or sets a value that determines how the control handles scrollbars when the current transformation results in the image being larger than the container.

Syntax

JavaScript

get_scrollMode();
set_scrollMode(value);
Object.defineProperty('scrollMode');

Property Value

Type	Description
ImageViewerScrollMode	The scroll mode. The default value is ImageViewerScrollMode.Auto.

Remarks

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

The size of the image in the viewer might become larger or smaller than the control size depending on the value of the current transform (ImageSize, ScaleFactor, AspectRatioCorrection, RotateAngle and SizeMode). In this case, the control might 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 ScrollRange properties of this control.

The value of RestrictHiddenScrollMode determines what to do when the user tries to pan the image outside the maximum scroll area (ScrollRange).

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

Value	Description
ImageViewerScrollMode.Auto	This instructs the control to use actual platform scrollbars. The viewer will show and hide the scrollbars depending on the transformation value. This is the default behavior. The value of RestrictHiddenScrollMode is not used in this case and the user cannot pan outside the maximum scroll area. In this mode, the control will use the AutoScrollDivId element to show/hide the scrollbars. You can manually scroll and pan the image from 0,0 to the maximum allowed (ScrollRange) by using ScrollOffset or ScrollBy. Note: Some platform, such as mobile and tablet browsers, do not support scrollbars. On these platforms ImageViewerScrollMode.Auto will not actually show any scroll bars. Instead, it will have the same behavior as setting the ScrollMode to ImageViewerScrollMode.Hidden and RestrictHiddenScrollMode to true.
ImageViewerScrollMode.Hidden	This instructs the control not enable scrolling without the use of actual scrollbars. The viewer will not show the scrollbars no matter what the transformation value is and AutoScrollDivId is never used. You can still manually scroll and pan the image from 0,0 to the maximum allowed (ScrollRange) by using ScrollOffset or ScrollBy.
ImageViewerScrollMode.Disabled	This instructs the viewer to disable scrolling completely. Scrollbars will never be visible regardless of the current transformation and any values set into ScrollOffset or passed to ScrollBy will be ignored.

The value of RestrictHiddenScrollMode controls what happens if the user tries to scroll or pan outside the range. When the value of RestrictHiddenScrollMode is true (the default), the user cannot scroll/pan outside the maximum range. This works just like RestrictHiddenScrollMode.Auto but without visible scrollbars. If the value of RestrictHiddenScrollMode 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 situation 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 ImageViewerScrollMode.Hidden with RestrictHiddenScrollMode 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 ImageViewerScrollMode.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 RestrictHiddenScrollMode from false back to true.

Example

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

Open the HTML page in your browser. Now when you click the Example button, the scrollbars will toggle.

JavaScript

example: function SiteLibrary_DefaultPage$example(viewer) {
   // Loop through the ImageViewerScrollMode options
   var scrollMode = viewer.get_scrollMode();

   if(scrollMode == lt.Controls.ImageViewerScrollMode.auto)
      scrollMode = lt.Controls.ImageViewerScrollMode.hidden;
   else if(scrollMode == lt.Controls.ImageViewerScrollMode.hidden)
      scrollMode = lt.Controls.ImageViewerScrollMode.disabled;
   else if(scrollMode == lt.Controls.ImageViewerScrollMode.disabled)
      scrollMode = lt.Controls.ImageViewerScrollMode.auto;

   // Show the values in the label
   var controlScrollModeNames = [ "Auto", "Hidden", "Disabled" ];

   var exampleLabel = document.getElementById("exampleLabel");
   exampleLabel.textContent = controlScrollModeNames[scrollMode];

   // Set the new values in viewer
   viewer.set_scrollMode(scrollMode);
},

ScrollMode Property

Property Value

Reference