javascript - 如何在移动 web UI 上实现选择性缩放？

Question

我想修改一个基于浏览器的电子书阅读器界面，这样用户就可以在内容(电子书的页面，div 中的 SVG)上进行触摸缩放(捏合缩放)，但不会导致 UI 元素还可以缩放(底部的固定栏和各种滑入式元素)。

目前，UI 元素位于页面底部的 position:fixed div 中，它会响应地调整大小，以便始终保持方便的比例。我们要有选择地允许缩放的“页面”位于占据页面大部分的全高 div 中，其中包含 SVG。滑入元素也是带有 position:absolute

的 div

所以从本质上讲，我们希望允许用户捏缩放(使用多点触控屏幕)，仅在“页面”div 而不会导致其他 div 缩放。

关于如何做到这一点有什么建议吗？

(我们已经为桌面浏览器实现了一个 slider 缩放界面，它工作正常，但作为移动界面不太直观)

Answer 1

因为我认为没有真正具体的代码可以给你，hammer.js可能是您想要研究的内容。

通过查看他们的 get started page，我可以想象代码看起来像这样:

 var element = document.getElementById('test_el');
 var hammertime = Hammer(element).on('pinchin', function(event) {
     alert('hello!');
 });