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

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

下面的代码： 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; 
}

来源

2016-08-30 Yash Mistry

不知道为什么那些样式内嵌设置和风格标签内的规则正在建立与重要！这是特异性蠕变。此外，容器的宽度正在内联固定，然后剪裁成最大宽度。这一切都使您的调试和精炼任务变得更加困难。

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

来源

2016-08-30 18:58:49

谢谢阿夫拉姆。你绝对正确。完整的故事是我正在微调我的客户为他们的在线商店购买的定制应用程序。这个应用程序不允许我改变HTML。只需让我添加CSS，并且由于内联样式而使其工作非常困难。您看到的html是我从Chrome上的开发人员工具中复制的。 –

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

回答

相关问题