javascript - 在滚动条上缩放 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

我已经调整了你的 fiddle 来工作。我想这就是你想要的。您需要定位您的内容，使它像您的描述一样工作。

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/