LEADTOOLS JavaScript (Leadtools.Controls)
Products | Support | Email a link to this topic. | Send comments on this topic. | Back to Introduction | Help Version 19.0.4.3
ScrollMode Property
Show in webframe
| Leadtools.Controls Namespace > ImageViewer Object : ScrollMode Property |
get_scrollMode();
set_scrollMode(value);
Object.defineProperty('scrollMode');
| Type | Description |
|---|---|
| ControlScrollMode | The scroll mode. The default value is ControlScrollMode.Auto. |
Changing the value of this property will fire the PropertyChanged and TransformChanged events.
The size of the view area might 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 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 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 |
|---|---|
| ControlSizeMode.Auto |
This instructs the control to use actual platform scrollbars. The viewer will show and hide the scrollbars depending on the transformation and image sizes 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 platform, 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. |
| ControlSizeMode.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. |
| ControlSizeMode.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. |
he 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 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 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.
Run the demo. Now when you click the Example button, the scroll mode will toggle.
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:
if (this._imageViewer.scrollMode != lt.Controls.ControlScrollMode.hidden) { this._imageViewer.scrollMode = lt.Controls.ControlScrollMode.hidden; this._imageViewer.restrictScroll = false; }