LEADTOOLS JavaScript (Leadtools.Controls)
LEAD Technologies, Inc

ScrollOffset Property

Example 

Gets or sets the scroll offset value.
Syntax
  get_scrollOffset();
 set_scrollOffset(value);
!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!

Property Value

TypeDescription
LeadPointDThe current scroll offset value. The default value is 0,0.
Remarks

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.

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

  • JavaScript
  •   
     
    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(Leadtools.LeadPointD.create(scrollRange.get_width(), scrollRange.get_height()));
       }
    },
See Also

Reference

ImageViewer Object
ImageViewer Members

 

 


Products | Support | Contact Us | Copyright Notices

© 2006-2012 All Rights Reserved. LEAD Technologies, Inc.