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/

滚动时缩放div内容

1 个答案: