スクロールでズーム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; 
}); 

しかし、それはどちらも動作しません。コンテンツのサイズを変更する方法はありますか？

編集：ここに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/