DIV with scroll


This is a continuation post to Avoiding HTML5 Canvas.

If, instead of panning and scrolling the entire browser window, you want to pan or scroll the image inside the DIV, replace lines 18-19 as follows.

      $('body').css('overflow', 'hidden');
      imagediv.css('overflow', 'scroll');
      imagediv.width($(window).width() - 10);
      imagediv.height($(window).height() - 10);
      imagediv.append($('<img src="' + url + '"/>'));

I have subtracted some pixels from the width and height of the DIV so that it fits snugly inside the browser window, without the need for scrollbars to pan the DIV itself. A more accurate measure of the scrollbar width can be used instead.

On Safari for iPhone with iOS 6, the height restriction on the DIV has no effect, it is automatically set to the image height by the browser. The width restrictions works all right. On the iPad, and other browsers, the DIV appears snugly within the browser window and the image can be panned using touch-and-drag. I did note the pan to be slightly sluggish, indicating an implementation that is not hardware accelerated.

Pinch to zoom does not work inside the DIV, although the entire document window can be pinched to zoom. I have heard of, but not experimented with, implementations such as iScroll 4 that provide this capability. With hardware acceleration lacking, performance may not be all that good.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s