放大中心並使用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

回答

相關問題