ScrollOffset Property

get_scrollOffset();
set_scrollOffset(value);
Object.defineProperty('scrollOffset');

Property Value

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

When the value of ScrollMode is ImageViewerScrollMode.Auto, then the value of ScrollOffset contains the current scrollbars offset. When the user clicks and drags on the scrollbars, the value of ScrollOffset (and the scrollbars thumbs) changes accordingly. The minimum value allowed is 0,0 (top-left) and the the maximum value allowed is stored in ScrollRange (setting ScrollOffset to ScrollRange will cause the viewer to scroll the image to the bottom-right corner. . You can manually pan the image by setting a value in ScrollOffset or calling ScrollBy.

When the value of ScrollMode is ImageViewerScrollMode.Hidden, then the value of ScrollOffset contains the virtual scroll (pan) offset, you can pan the image by changing the value of ScrollOffset or calling ScrollBy. If the value of RestrictHiddenScrollMode is true, then the minimum and maximum scroll values are the same as the case above. If the value of RestrictHiddenScrollMode is false, then there is no minimum and maximum scroll ranges, you are allowed to set ScrollOffset to any value. 0,0 and ScrollRange will still be the values to use if you want to either scroll the image to top-left or right-bottom.

When the value of ScrollMode is ImageViewerScrollMode.Disabled, then trying to change the value of ScrollOffset or calling ScrollBy will be ignored.

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 offset values will be displayed. Pan the image and then click the button again to scroll to the maximum allowed value (bottom-right of the image).

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

   // Subscribe to the PropertyChanged event
   var exampleLabel = document.getElementById("exampleLabel");

   // Get the scroll current range
   var scrollRange = viewer.get_scrollRange();

   if(!this.scrollChangedHooked) {
      // First click, hook to the event
      this.scrollChangedHooked = true;
      viewer.add_scrollChanged(function(sender, e) {
         // Show the scroll offset and range
         var scrollOffset = viewer.get_scrollOffset();
         exampleLabel.textContent =
            "Current scroll offset: " + scrollOffset.get_x() + ", " + scrollOffset.get_y() +
            ". Scroll range: " + scrollRange.get_width() + ", " + scrollRange.get_height() +
            ". Click Example again to scroll to bottom-right";
      });
   }
   else {
      // Other clicks, scroll to bottom-right
      viewer.set_scrollOffset(lt.LeadPointD.create(scrollRange.get_width(), scrollRange.get_height()));
   }
},