我设法使鼠标拖动以滚动div,但是用鼠标进行的放大/缩小操作尚未完成。
它可以工作,但是我希望鼠标指针将图像保持在该位置并同时缩放它,如下所示:
在缩放之前,我需要使用scrollBy()
将滚动返回到上一个点。有人知道该怎么做吗?
这是由某人https://jsfiddle.net/xta2ccdt/13/制作的小提琴,这正是我所需要的,但是代码使用translate()
以及此处不适用的其他功能,因为我也有滚动/拖动功能。 / p>
这是我的jsfiddle代码https://jsfiddle.net/catalinu/1f6e0jna/
这是stackoverflow中的代码:
请帮助。我为此奋斗了好几天。
for (const divMain of document.getElementsByClassName('main')) {
// drag the section
for (const divSection of divMain.getElementsByClassName('section')) {
// when mouse is pressed store the current mouse x,y
let previousX, previousY
divSection.addEventListener('mousedown', (event) => {
previousX = event.pageX
previousY = event.pageY
})
// when mouse is moved, scrollBy() the mouse movement x,y
divSection.addEventListener('mousemove', (event) => {
// only do this when the primary mouse button is pressed (event.buttons = 1)
if (event.buttons) {
let dragX = 0
let dragY = 0
// skip the drag when the x position was not changed
if (event.pageX - previousX !== 0) {
dragX = previousX - event.pageX
previousX = event.pageX
}
// skip the drag when the y position was not changed
if (event.pageY - previousY !== 0) {
dragY = previousY - event.pageY
previousY = event.pageY
}
// scrollBy x and y
if (dragX !== 0 || dragY !== 0) {
divMain.scrollBy(dragX, dragY)
}
}
})
}
// zoom in/out on the section
let scale = 1
const scaleFactor = 0.05
divMain.addEventListener('wheel', (event) => {
// preventDefault to stop the onselectionstart event logic
event.preventDefault()
for (const divSection of divMain.getElementsByClassName('section')) {
// set the scale change value
const scaleChange = (event.deltaY < 0) ? scaleFactor : -scaleFactor
// don't allow the scale to go outside of [0,5 - 2]
if (scale + scaleChange < 0.5 || scale + scaleChange > 2) {
return
}
// round the value when using high dpi monitors
scale = Math.round((scale + scaleChange) * 100) / 100
// apply the css scale
divSection.style.transform = `scale(${scale}, ${scale})`
// re-adjust the scrollbars
const x = Math.round(divMain.scrollLeft * scaleChange)
const y = Math.round(divMain.scrollTop * scaleChange)
divMain.scrollBy(x, y)
}
})
}
body {
margin: 0;
}
.main {
width: 100%; /* percentage fixes the X axis white space when zoom out */
height: 100vh; /* this is still an issue where you see white space when zoom out in the Y axis */
overflow: scroll; /* needed for safari to show the x axis scrollbar */
}
.main .section {
width: 200%;
height: 200vh;
background-image: url('https://iso.500px.com/wp-content/uploads/2014/07/big-one.jpg');
transform-origin: 0 0;
}
<main class="main">
<section class="section"></section>
</main>
答案 0 :(得分:1)
您的问题主要围绕以下几行
const x = Math.round(divMain.scrollLeft * scaleChange)
const y = Math.round(divMain.scrollTop * scaleChange)
按比例滚动的方式如下所示
x, y
坐标x, y
坐标,将其与新的缩放比例相乘offset x,y
中减去scaled x,y
,则会得到向左滚动和向上滚动。更新后的代码如下所示
for (const divMain of document.getElementsByClassName('main')) {
// drag the section
for (const divSection of divMain.getElementsByClassName('section')) {
// when mouse is pressed store the current mouse x,y
let previousX, previousY
divSection.addEventListener('mousedown', (event) => {
previousX = event.pageX
previousY = event.pageY
})
// when mouse is moved, scrollBy() the mouse movement x,y
divSection.addEventListener('mousemove', (event) => {
// only do this when the primary mouse button is pressed (event.buttons = 1)
if (event.buttons) {
let dragX = 0
let dragY = 0
// skip the drag when the x position was not changed
if (event.pageX - previousX !== 0) {
dragX = previousX - event.pageX
previousX = event.pageX
}
// skip the drag when the y position was not changed
if (event.pageY - previousY !== 0) {
dragY = previousY - event.pageY
previousY = event.pageY
}
// scrollBy x and y
if (dragX !== 0 || dragY !== 0) {
divMain.scrollBy(dragX, dragY)
}
}
})
}
// zoom in/out on the section
let scale = 1
const factor = 0.05
const max_scale =4
divMain.addEventListener('wheel', (e) => {
// preventDefault to stop the onselectionstart event logic
for (const divSection of divMain.getElementsByClassName('section')) {
e.preventDefault();
var delta = e.delta || e.wheelDelta;
if (delta === undefined) {
//we are on firefox
delta = e.originalEvent.detail;
}
delta = Math.max(-1,Math.min(1,delta)) // cap the delta to [-1,1] for cross browser consistency
offset = {x: divMain.scrollLeft, y: divMain.scrollTop};
image_loc = {
x: e.pageX + offset.x,
y: e.pageY + offset.y
}
zoom_point = {x:image_loc.x/scale, y: image_loc.y/scale}
// apply zoom
scale += delta*factor * scale
scale = Math.max(1,Math.min(max_scale,scale))
zoom_point_new = {x:zoom_point.x * scale, y: zoom_point.y * scale}
newScroll = {
x: zoom_point_new.x - e.pageX,
y: zoom_point_new.y - e.pageY
}
divSection.style.transform = `scale(${scale}, ${scale})`
divMain.scrollTop = newScroll.y
divMain.scrollLeft = newScroll.x
}
})
}
更新的小提琴是