javascript - 使用 CSS Javascript 在中心放大并通过拖动滚动

Question

我正在为一家在线商店构建产品构建器。我让图像在悬停和滚动时放大，但它滚动到左上角。当我将原点设置为居中时，它会在中心放大，但不会滚动到左侧或顶部。另外，非 Mac 用户无法使用鼠标滚轮左右滚动，因此我希望能够通过拖动来滚动。任何帮助将不胜感激。

代码如下: HTML:

<div id="option_image" class="rotationViewer option_image spritespin-instance" style="max-height: 544px; -webkit-user-select: none; overflow: hidden; position: relative; width: 3600px; height: 3600px;" unselectable="on">
    <div class="spritespin-stage" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: block; background-image: url(&quot;//www.shappify-cdn.com/images/78432/86058914/001_first-screen.png&quot;); background-size: 500px 500px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
    <div class="spritespin-preload" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: none;"></div>
</div>

CSS:

#option_image:hover {
width: 500px !important; 
height: 500px !important; 
overflow-x: auto !important; 
overflow-y: auto !important;
}
.spritespin-stage { 
transition: all .2s ease-in-out; 
position: absolute !important;
}
.spritespin-stage:hover { 
margin: center;
transform: scale(5); 
transform-origin: top left;
}

Answer 1

不知道为什么这些样式是内联设置的，并且样式标记中的规则是用 !important 设置的。这就是特异性蠕变。此外，容器的宽度是内联固定的，然后剪裁为最大宽度。这一切都会使您的调试和优化任务变得更加困难。

一个更核心的问题似乎是焦点之一。您的容器 div 不可聚焦。当用户悬停时，如果满足滚动发生的条件，任何使用滚轮的滚动都会滚动具有焦点的任何元素。如果聚焦适合您想要的用户体验，您可以将 .option_image 容器的 tabindex 属性设置为零。