у меня на js была такая же задача - вот код решения (as is)
onScroll = ({dy, x, y}) => {
let border = this.props.border * this.state.containerWidth / 100;
let originalDeltaX = x - this.state.x ;
let originalDeltaY = y - this.state.y ;
let deltaX = originalDeltaX;
let deltaY = originalDeltaY;
let minWidth = this.state.containerWidth - border * 2;
let minHeight = this.state.containerHeight - border * 2;
let prevWidth = this.state.width;
this.state.width -= dy / 5;
this.state.height *= this.state.width / prevWidth;
deltaX *= this.state.width / prevWidth;
deltaY *= this.state.width / prevWidth;
if(this.state.width < minWidth) {
let scale = minWidth / this.state.width;
this.state.width *= scale;
this.state.height *= scale;
deltaX *= scale;
deltaY *= scale;
}
if(this.state.height < minHeight) {
let scale = minHeight / this.state.height;
this.state.width *= scale;
this.state.height *= scale;
deltaX *= scale;
deltaY *= scale;
}
let newX = this.state.x - deltaX + originalDeltaX;
let newY = this.state.y - deltaY + originalDeltaY;
if(newX > border) {
newX = border;
}
if(newY > border) {
newY = border;
}
if(newX + this.state.width < this.state.containerWidth - border) {
newX = this.state.containerWidth - border - this.state.width;
}
if(newY + this.state.height < this.state.containerHeight - border) {
newY = this.state.containerHeight - border - this.state.height;
}
this.setState({
width : this.state.width,
height : this.state.height,
x : newX,
y : newY
});
};