美文网首页
对某个div进行缩放,实现局部滚动缩放

对某个div进行缩放,实现局部滚动缩放

作者: 板栗炖牛肉 | 来源:发表于2021-09-02 17:46 被阅读0次

    前言

    • 页面存在多个div,现在我鼠标滚动缩放(浏览器缩放)只缩放其中一个div
    • 对设置调整浏览器百分比无效

    解决方案

    • 添加滚动监听
      window.addEventListener('mousewheel', this.zoomMonitor, {passive: false});
    
        /**
         * 缩放监听
         * @param event
         */
        zoomMonitor = (event) => {
            let that = this;
            if (event.ctrlKey === true || event.metaKey) {
                event.preventDefault();
            }
            if (turnOnZoom) {
                let div = document.getElementById("layout-content");
                that.state.zoom += -event.deltaY / 1000;
                div.style.zoom = that.state.zoom;
            }
        };
    
    
    • 完结,很简单

    相关文章

      网友评论

          本文标题:对某个div进行缩放,实现局部滚动缩放

          本文链接:https://www.haomeiwen.com/subject/vadcwltx.html