允许浏览器只对网站的一部分(如谷歌地图)进行缩放

Question

我想能够对我的网站像谷歌地图的影响。顶部栏和侧边栏，我不想让它们改变，无论是使用普通滚轮还是ctrl +滚轮。

然而，中心部分我希望能够像谷歌地图一样放大/缩小，只需使用滚轮。我该如何做到这一点?

用于我正在构建的angular应用程序。也使用画布更好的缩放效果?

Answer 1

使用jQuery，你可以安装一个$('#container').on('wheel', zoomContainer)处理程序，它使用缩放变换来调整容器的大小。本地JavaScript等效处理程序为:document.querySelector('#container').onwheel = zoomContainer;

这是一个概念证明。我还没有弄清楚如何在缩放时裁剪容器。

let scale = 1;
function zoomContainer(event) {
event.preventDefault();
if(event.originalEvent.deltaY !== 0) {
if(event.originalEvent.deltaY < 0) {
// wheeled up
scale += 0.1;
} else {
// wheeled down
if(scale > 0.2) {
scale -= 0.1;
}
}
$('#wrapper').css({transform: 'scale(' + scale+')'});
}
}
$('#container').on('wheel', zoomContainer);

#page {
width: 500px;
}
#header, #footer, #leftSide, #rightSide {
border: 1px gray solid;
padding: 3px 10px;
}
#leftSide {
float: left;
height: 200px;
}
#rightSide {
float: right;
height: 200px;
}
#wrapper {
height: 200px;
overflow: hidden;
}
#container {
width: 300px;
height: 200px;
padding: 3px 10px;
overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page">
<div id="header">Header</div>
<div>
<div id="leftSide" style="float: left;">Left Sidebar</div>
<div id="rightSide" style="float: right;">Right Sidebar</div>
<div id="wrapper">
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /><br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /><br />
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /><br />
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">Footer</div>
</div>

类似地，您可以使用带有translate的转换来实现平移。