鼠标控制图片放大缩小div带滚动条效果

可以通过以下步骤实现鼠标控制图片放大缩小div带滚动条效果：

1. 在HTML文件中创建一个div元素，并设置其样式为具有固定高度和宽度且具有滚动条的容器。

<div id="container" style="width: 500px; height: 500px; overflow: auto;">
    <img id="image" src="path/to/image.jpg" alt="image" style="width: 100%; height: auto;">
</div>

2. 在JavaScript文件中获取容器和图像元素，并设置图像元素的初始缩放级别。

const container = document.getElementById('container');
const image = document.getElementById('image');
let scale = 1;

3. 监听鼠标滚轮事件，并根据滚轮滚动方向调整图像的缩放级别和滚动条位置。

container.addEventListener('wheel', (event) => {
  event.preventDefault();
  const delta = Math.sign(event.deltaY);
  scale += delta * 0.1;
  if (scale < 1) scale = 1;
  if (scale > 3) scale = 3;
  image.style.transform = `scale(${scale})`;
  const containerWidth = container.clientWidth;
  const containerHeight = container.clientHeight;
  const imageWidth = image.width * scale;
  const imageHeight = image.height * scale;
  container.scrollLeft = (imageWidth - containerWidth) / 2;
  container.scrollTop = (imageHeight - containerHeight) / 2;
});

这样就可以通过鼠标滚轮控制图片的放大和缩小，并且在容器中显示滚动条以便用户查看整个图片。