html 怎么禁止局部缩放包括文字,图片,div

Question

html 怎么禁止鼠标滚轮的局部缩放包括文字,图片,div,如,指定页面一个div,让其子组件,孙子组件都不缩放

Answer 1

思路大概是监听页面缩放比例，然后动态的改变节点的大小，来保存不论缩小或者放大 你的节点保存相对不变



   <script>
            window.addEventListener('mousewheel', function (event) {
                console.log('执行啦')
                console.log(event)
                console.log(detectZoom())
                document.querySelector('#viewDiv').style.width=200/detectZoom()*100+'px'
                document.querySelector('#viewDiv').style.height=200/detectZoom()*100+'px'
                console.log(document.querySelector('#viewDiv').style.width)
                    }, { passive: false });
    
                //获取当前页面的缩放值
                function detectZoom() {
                        var ratio = 0,
                            screen = window.screen,
                            ua = navigator.userAgent.toLowerCase();

                        if (window.devicePixelRatio !== undefined) {
                            ratio = window.devicePixelRatio;
                        }
                        else if (~ua.indexOf('msie')) {
                            if (screen.deviceXDPI && screen.logicalXDPI) {
                                ratio = screen.deviceXDPI / screen.logicalXDPI;
                            }
                        }
                        else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
                            ratio = window.outerWidth / window.innerWidth;
                        }

                        if (ratio) {
                            ratio = Math.round(ratio * 100);
                        }
                        return ratio;
                    }

    </script>

```