RestrictHiddenScrollMode Property

get_restrictHiddenScrollMode();
set_restrictHiddenScrollMode(value);
Object.defineProperty('restrictHiddenScrollMode');

Property Value

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). 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 or very large values). This might be useful in some situation like mapping or medical applications.

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 scenario). 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.

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 scroll restriction will toggle. Try to pan the image outside the control boundaries to see the difference.

example: function SiteLibrary_DefaultPage$example(viewer) {
   // DefaultInteractiveMode is set to ImageViewerPanZoomInteractiveMode in other parts of the demo

   // Set the scroll mode to hidden
   viewer.set_scrollMode(lt.Controls.ImageViewerScrollMode.hidden);

   // Toggle the RestrictHiddenScrollMode property
   viewer.set_restrictHiddenScrollMode(!viewer.get_restrictHiddenScrollMode());

   var exampleLabel = document.getElementById("exampleLabel");
   if(viewer.get_restrictHiddenScrollMode()) {
      exampleLabel.textContent = "Restricted scrolling, try to pan the image, note that you cannot go outside the boundaries.";
   } else {
      exampleLabel.textContent = "None-restricted scrolling, try to pan the image, note that you are allowed to go outside the boundaries.";
   }

   exampleLabel.textContent += " Click Example again to toggle the mode";
},