我正在编写一个非常小的功能,但我遇到了滚动问题。我需要使用 css 缩放 div:
transform: scale(X,Y)
但我的问题是我在父 div 中没有正确的左滚动和上滚动。我需要知道每次用户按下“更多缩放”按钮时如何计算新的左侧和顶部,如果它是强制性的,我可以使用 translate css 属性。
我可以使用 jQuery,但我认为这只是一个数学问题 :)
一个细节:我需要图像从中心开始生长。
图片:
这是 fiddle :
最佳答案
我相信你也需要注意 transform-origin:
// get element references
var foo = document.querySelector('#foo');
var bar = document.querySelector('#bar');
// fit bar into foo
// the third options argument is optional, see the README for defaults
// https://github.com/soulwire/fit.js
var zoom = 1;
var trans = 50;
var moreZoom = document.querySelector('#moreZoom');
moreZoom.onclick = function(e){
console.log(foo);
bar.style.transform = 'scale(' + (zoom + 0.1) + ',' + (zoom + 0.1) + ')';
zoom = (zoom + 0.1);
bar.style.transformOrigin = (50 / zoom) +'px ' +(50 / zoom )+'px';
}
#foo {
background: #36D7B7;
height: 200px;
width: 400px;
padding: 50px;
overflow: auto;
}
#bar {
background-image: url('http://www.space.com/images/i/000/028/001/original/wing-small-magellanic-cloud-galaxy-1920.jpg?interpolation=lanczos-none&fit=around%7C1440:900&crop=1440:900;*,*');
background-size:cover;
height: 100%;
transform:scale(1);
width: 100%;
}
<script src="https://rawgithub.com/soulwire/fit.js/master/fit.js"></script>
<button id="moreZoom">
More Zoom
</button>
<div id="foo">
<div
关于javascript - 使用溢出滚动和中心在另一个 div 内缩放 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40794892/