스크롤에서 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/