I need the ability to resize the content within a div without changing the size of the div itself when the user scrolls. The function I currently have is as follows:
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;
});
While this works for the div itself, I also have multiple small draggable tables within the div that have the .foo class, and I want to resize them independently without affecting the parent's size. I attempted the following solution as well:
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;
});
Unfortunately, this method did not work either. Is there another way to resize the content individually without impacting the div?
EDIT: Here is the jsfiddle link for reference: https://jsfiddle.net/vaxobasilidze/ba2n9a61/
Although it's not an exact representation of my project due to complexity, the main concept remains the same. I aim to keep the size of the #zoomable div constant while allowing its content (in this case paragraphs) to be resizable.