Question

我在尝试相关问题的答案方面一直没有成功，因此我们将不胜感激。

我有一个在iframe中显示表单的模式-这是可滚动的。此问题发生在ios上，主体在下面滚动，而不是在iframe上滚动。我需要防止主体滚动并允许iframe滚动。

由于痴呆症的建议修复方法无法正常工作，因为模态下方的身体仍会滚动，除非您在正确的位置触摸滚动模态，但这非常有气质。

模式：

    (function($) {
        $.fn.bmdIframe = function( options ) {
            var self = this;
            var settings = $.extend({
                classBtn: '.bmd-modalButton',
                defaultH: 360
            }, options );      
        $(settings.classBtn).on('click', function(e) {
            var allowFullscreen = $(this).attr('data-bmdVideoFullscreen') || false;
            var url      = window.location.href;
            var fieldId = "Form_Source_URL";
            var trackingURL = $(this).attr("data-bmdSrc") + '?' + fieldId + '=' + url;

            var dataVideo = {
                'src': trackingURL,
                'height': $(this).attr('data-bmdHeight') || settings.defaultH,
                'width': $(this).attr('data-bmdWidth') || settings.defaultW
            };

            if ( allowFullscreen ) dataVideo.allowfullscreen = "";


            $(self).find("iframe").attr(dataVideo);


        });


        this.on('hidden.bs.modal', function(){
            $(this).find('iframe').html("").attr("src", "");
        });

        return this;
    };

})(jQuery);

jQuery(document).ready(function(){
    jQuery("#myModal").bmdIframe();

});

//attempted fix to stop body scrolling
var iframe = document.getElementById('formIframe');
iframe.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, false);

jQuery / js：

using (var salsa = new Salsa20.Salsa20())
            {
                using (var fstream_out = new FileStream(filePath, FileMode.Truncate, FileAccess.ReadWrite, FileShare.Write))
                {
                    salsa.Key = key;
                    salsa.IV = iv;
                    using (var cstream = new CryptoStream(fstream_out, salsa.CreateEncryptor(), CryptoStreamMode.Write))
                    {
                        var bytes = File.ReadAllBytes(filePath);
                        cstream.Write(bytes, 0, 1000000);
                    }
                }
            }

Answer 1

在项目中，我将其用于语义UI模态，甚至重用了相同的功能来帮助定制Coveo模态/弹出窗口。

这是可重用的JQuery函数：

@RequestMapping("/{userid}/users")
    public String userGames(@PathVariable final Long userid, Model model){

...get, other methods, etc
        return "users";

CSS以帮助添加/删除的类：

// Definite way of removing body scrollbar (mainly for iOS).
forceRemoveBodyScrollbar = function(removeScrollbar) {
    bodyScrollPositionBeforeScrollbarRemoved;

    if (removeScrollbar) {
        bodyScrollPositionBeforeScrollbarRemoved = $(window).scrollTop();

        // Add body class that prevents scrolling behind pop up.
        $('body').addClass('force-remove-body-scrollbar').css('top', '-' + bodyScrollPositionBeforeScrollbarRemoved + 'px');
    } else {
        // Remove attributes used to prevent scrolling of content behind Coveo pop up.
        $('body').removeClass('force-remove-body-scrollbar').removeAttr('style');

        // Scroll back to original top position prior to clicking Filters button.
        $(window).scrollTop(bodyScrollPositionBeforeScrollbarRemoved);
    }
}

现在，在将代码执行到OPEN模式的任何地方，只需添加body.force-remove-body-scrollbar { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: auto; transition: none; }

示例：如果通过单击按钮打开模态：

forceRemoveBodyScrollbar(true);

在执行代码以关闭模式的任何地方，只需添加$('.myOpenModalButton').on('click', function() { forceRemoveBodyScrollbar(true); // Other Modal related JS. }

示例：可以绑定到关闭按钮的点击事件和模态后面显示的深色背景，如下所示：

forceRemoveBodyScrollbar(false);

jQuery或js以防止正文在ios上滚动

1 个答案: