缩放 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 class 的可拖动小表格，我想在不更改 parents 大小的情况下调整它们的大小。我也试过这个：

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/

缩放 div 滚动内容

Zoom div content on scroll

html

javascript

css

jquery

resize