I would like to find a way to have the image scroll to the right (preferably without animation but I'll take animation as well)

requirements

1. this for a page that is a window that is being opened where the html is being generated on the fly (i.e. there is no file being loaded). The purpose of which is to show an image. The image is wider than the browser and I would like it to be showing the rightmost part, hence the scroll to the right.

2. preferably no javascript in the spawned window. I investigated this last night and I couldn't easily figure out how to use innerHTML to insert script. If the only way is to use javascript then I guess I'm open to that.

I spent a lot of time investigating this last night, and couldn't figure it out. The closest I came was float: right... this is almost perfect, except I couldn't figure out how to show the scrollbars. And scrollbars are essential here, so I can view the left side of the image.

Does anyone have any ideas?

CodePudding user response：

I cannot see how this can be done without some JS on the new page loading.

This code scrolls the page once the image is loaded using the JS scroll function. The amount to be scrolled is the natural width of the image minus the viewport width.

<button onclick="showimg();">Click me to show image</button>
<script>
function showimg() {
  newWindow = window.open("","newwindow");
  newWindow.document.write("<img src='https://picsum.photos/id/1015/3000/1000' onl oad='window.scroll(this.width - window.innerWidth, 0);'>");
}
</script>