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属性设置为零。

放大中心并使用CSS Javascript拖动滚动

1 个答案: