How to set the scroll-thumb at the centre of the scrollbar-CodePudding

I'm using react application and trying to display image and applying customised zoom-in/ zoom-out. Not using any library because I have to add a marker on each image and using library for zooming isn't giving proper co-ordinates for positioning marker.

I'm passing max-height and max-width to the image so that image can be viewed in its original proportion. Functions for Zoom-In and Zoom-out :

 zoomOut = () => {
        var myImg = document.getElementById("action-image")
        var currWidth = (myImg.style.maxWidth.split("v"))[0];
        var currHeight = (myImg.style.maxHeight.split("v"))[0];

        myImg.style.maxWidth = (Number(currWidth) - 50)   "vw";
        myImg.style.maxHeight = (Number(currHeight) - 50)   "vh";
        if (this.state.scale == 0)
            this.resetImage()
        else if (this.state.scale != 0) {
            this.setState((state) => ({
                ...state,
                scale: this.state.scale - 1
            }))
        }
    }
    zoomIn = () => {
        console.log(this.state.scale);
        if (this.state.scale < 11) {
            var myImg = document.getElementById("action-image")
            var currWidth = (myImg.style.maxWidth.split("v"))[0];
            var currHeight = (myImg.style.maxHeight.split("v"))[0];
            myImg.style.maxWidth = (Number(currWidth)   50)   "vw";
            myImg.style.maxHeight = (Number(currHeight)   50)   "vh";
            this.setState((state) => ({
                ...state,
                scale: this.state.scale   1
            }))
        }
    }

    resetImage = () => {
        var myImg = document.getElementById("action-image")
        myImg.style.maxHeight = '95vh'
        myImg.style.maxWidth = '75.4vw'
        this.setState((state) => ({
            ...state,
            scale: 0,
        }))
    }

Image rendering:

 <RegionSelect
    maxRegions={1}
    regions={this.state.imageLoad ? [] : this.state.regions}
    regionStyle={regionStyle}
    constraint={false}
    onChange={this.onChange}
    Draggable={false}
    regionRenderer={this.regionRenderer}
 >
<img id="action-image" style={{ zIndex: 1, maxHeight: '95vh', maxWidth: '75.4vw' }} 
src={this.state.imageURL} onl oad={((load) => {
  this.setState((state) => ({
    ...state,
    imageLoad: false,
    height: 'unset',
    width: 'unset'
   }))
  })} />
</RegionSelect>

Image before zoom In

Image after zoom In

The problem is as the image is centred to maintain its aspect ratio, when the image is zoomed in,the scrollbar also should get centred which will allow to scroll upwards also. But the scroll bar starts at the top most & left most position, which makes some part(from top and left side) of image hidden.

CodePudding user response：

So, first of all you need to get height of scroll-bar thumb then you can use window.scroll function to set desired distance to it why do we need height of scroll-bar thumb? because scroll function won't move scroll bar according to it's center

var arrowHeight = 25;
var viewportHeight = window.innerHeight;

var contentHeight = getComputedStyle(document.body).height;

contentHeight = parseFloat(contentHeight);
var viewableRatio = viewportHeight / contentHeight;

var scrollBarArea = viewportHeight - arrowHeight * 2; 

var thumbHeight = scrollBarArea * viewableRatio; 

var scrollAmount = (contentHeight / 2) - thumbHeight;

window.scroll({
    top: scrollAmount,
  left: 0,
  behavior: 'smooth'
})

here's the full fiddle to see how it works

https://jsfiddle.net/mahdiar_mansouri/5ypaeo4q/5/