在滚动上缩放div内容

Question

我想使div内容可调整大小，但div本身保持相同大小。 用户滚动时应该会发生这种情况。 我有这个功能：

var zoomable = document.getElementById('zoomable'),
    zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    zoomable.style.transform = 'scale(' + zX + ')';
    e.preventDefault();
    return;
});

这仅适用于div本身。 在这个div中，我有多个带有.foo类的小型可拖动表，并且我希望在不更改父级大小的情况下调整它们的大小。 我也尝试过这个：

var zoomable = document.getElementsByClassName('foo'),
    zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    zoomable.each(function(){ 
        $(this).style.transform = 'scale(' + zX + ')'; 
    })
    e.preventDefault();
    return;
});

但是也不行。 有没有办法调整内容的大小，但没有div的大小？

编辑：这是jsfiddle： https ://jsfiddle.net/vaxobasilidze/ba2n9a61/这不完全是我的项目（因为它太复杂了），但是想法是相同的。 我想使#zoomable div保持相同的大小，并且其内容（在本例中为段落）可以调整大小。

Answer 1

我已经调整了您的小提琴以使其正常工作。 我想这就是你想要的。 您需要定位内容以使其像您的描述一样工作。

var content = document.getElementById('zoomable').getElementsByTagName('p');
var zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    for (var i = 0; i<content.length; i++) {
         content[i].style.transform = 'scale(' + zX + ')';
        }

    e.preventDefault();
    return;
});

https://jsfiddle.net/Karadjordje1389/z254o87v/