如何在Iframe中禁用鼠标滚轮滚动交互

时间:2017-07-14 07:01:50

标签: iframe archilogic

我是一名开发人员,致力于整合Archilogic内容(目前仅将iframe嵌入)到我的WordPress插件中。

我们在窗口的整个宽度上显示内容,但能够补充下面的其他内容。当定位浏览器窗口使得交互式内容填充整个视口时,这种全宽度呈现方法有时可能为用户创建问题。在这种情况下,他们无法滚动/向下滑动页面,超过“正在运行”的模型。

是否可以(通过URL参数)禁用特定嵌入的“鼠标滚轮”交互?

由于

1 个答案:

答案 0 :(得分:3)

您可以实现此目的的一种方法是在iframe顶部放置透明覆盖,当用户主动尝试与iframe交互时(例如通过点击),只有这样才能允许鼠标事件通过到iframe。

掩码可以像

一样简单
events {
        worker_connections 768;
        # multi_accept on;
}

http {
        # this section is needed to proxy web-socket connections
        map $http_upgrade $connection_upgrade {
                default upgrade;
                  ''      close;
        }

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##
        include /etc/nginx/mime.types;
        gzip on;
        gzip_disable "msie6";
        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json 
          application/javascript text/xml application/xml applicatio
        n/xml+rss text/javascript;
        ##
        # Virtual Host Configs
        ##
        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}
#mail {
#       # See sample authentication script at:
#       # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
# 
#       # auth_http localhost/auth.php;
#       # pop3_capabilities "TOP" "USER";
#       # imap_capabilities "IMAP4rev1" "UIDPLUS";
# 
#       server {
#               listen     localhost:110;
#               protocol   pop3;
#               proxy      on;
#       }
# 
#       server {
#               listen     localhost:143;
#               protocol   imap;
#               proxy      on;
#       }
#}
include /etc/nginx/sites-enabled/*;

它会阻止鼠标滚轮事件,直到它被点击为止。

还有archilogic模型<div onclick="style.pointerEvents='none'"></div> 的url参数,它会暂停模型直到你发挥作用