javascript - 移动时的菜单不会滚动

Question

我正在修复一个由我以外的人建立的网站。我需要修复移动 View 中的菜单滚动。到目前为止，我真正知道的是，如果你调整浏览器的大小，你就会突然能够滚动，但如果你使用的是手机，那么情况就不是这样了。该网站名为 clasado.com 如果您通过缩小浏览器视口(viewport)更改为移动 View ，然后打开菜单，您将看到在调整浏览器大小之前无法滚动。此菜单的 javascript 如下:

 /**
 * Navigation.js
 */
(function() {
    var Console = window.Console || (function() {
        return {
            name: function() { return "Console" },
            defaultConfig: function() { return this; },
            config: function() { return this; },
            to: function() { return this; },
            in: function(m) { console.log(m); return this; },
            out: function() { return this; },
            log: function(m) { console.log(m); return this; },
            reset: function() { return this; }
        }
    })();

    var search = {
        open: "[data-open]",
        toggler: ">a>[data-toggle]",
        group: "li > ul[data-collapsible]",
        collapsible: "[data-collapsible]",
        sidebarLeft: ".is-data .sidebar-left",
        sidebar: ".sidebar"
    }

    /**
     * The data-open attribute denotes that the menu block should open the sidebar
     */
    $(search.open).on("click", function(evt) {
        var sidebar = $(search.sidebar);
        var toggler = UUID.generateFor(this);

        var Log = toggler.data("log");

        if(window.handyHint) {
            handyHint.hide();
        }

        var isVertical = (function(sidebar, Log) {
            return function() { 
                Log.in("checkIfSidebarIsVertical");
                var isVertical = sidebar.find(".visible.vertical").css("display") !== "none"; 
                return Log.out(isVertical);
            }
        })(sidebar, Log);

        var sidebarControl = (function(sidebar, Log, isVertical) {
            return {
                /*
                 *  Check to see if the sidebar is currently open
                 */
                isOpen: function() {
                    return sidebar.data("open") === true && sidebar.hasClass("open");
                },
                isClosed: function() {
                    return sidebar.data("open") !== true && !sidebar.hasClass("open");  
                },
                /*
                 *  Opens the passed sidebar
                 */
                open: function() {
                    Log.in("sidebarControlOpen");

                    if(!!sidebar.data("open") === true) {
                        // Sidebar is already open
                        return Log.out(true);
                    }

                    if(isVertical()) {
                        sidebar.find("> .menu").slideDown(100);
                    }

                    sidebar.toggleClass("open");

                    $("<div></div>", { class: "nav-cover" }).appendTo("body").on( "click", this.close )

                    sidebar.data("open", true);
                    //docCookies.setItem("navbarOpen", true, null, "/", document.location.hostname, false);

                    return Log.out(true);
                },
                close: function() {
                    Log.in("sidebarControlClose");

                    if(!!sidebar.data("open") === false) {
                        // Sidebar is already closed
                        return Log.out(true);
                    }

                    if(isVertical()) {
                        sidebar.find("> .menu").slideUp();
                    }

                    var closed_left = sidebar.data("closed_left");

                    Log.log("left : " + closed_left);

                    sidebar.toggleClass("open");

                    $(".nav-cover").remove();

                    sidebar.data("open", false);
                    //docCookies.setItem("navbarOpen", false, null, "/", document.location.hostname, false);

                    return Log.out(true);
                }
            }
        })(sidebar, Log, isVertical);

        /* Only do anything if the sidebar exists */
        if(sidebar.isNotEmpty()) {
            Log.in("sidebarExists");

            if(sidebar.data("open")) {
                Log.in("isOpen");

                /* 
                 * If the sidebar is currently open, then it is important to 
                 * decide if the sidebar should just toggle to a different
                 * menu or be closed.
                 */

                if(!!toggler.data("open")) {
                    Log.in("hasStrip");

                    /* 
                     * Prevent the default action if the menu block is meant to
                     * open the sidbar
                     */

                     Log.log("Prevent default action");
                     // evt.preventDefault();


                    /*
                     * The toggler has a strip associated with it. Find the strip
                     * and use it to make a decision whether to open it or 
                     * to close it and the sidebar (if it was already open).
                     */

                    var area = toggler.data("open");
                    var menu_strip = $(".menu-strip." + area);

                    if(menu_strip.isNotEmpty()) {
                        Log.in("foundStrip");

                        var strip_was_open = !!menu_strip.hasClass("open");

                        var toggle = menu_strip.find(search.toggler);
                        if(toggle.isNotEmpty()) {
                            Log.in("foundToggle");

                            toggle.click();

                            Log.out();
                        }

                        if(strip_was_open) {
                            Log.in("stripWasOpen");

                            /*
                             * If the strip was open at the start of this check,
                             * then the sidebar needs to be closed.
                             */

                            sidebarControl.close();

                            Log.out();
                        } else {
                            Log.log("stripWasClosed");
                        }

                        Log.out();
                    } else {
                        Log.in("couldNotFindStrip");

                        sidebarControl.close();

                        Log.out();
                    }

                    Log.out();
                } else {
                    sidebarControl.close();
                }

                Log.out();
            } else {
                Log.in("isClosed");

                /*
                 * If the sidebar is closed, it needs to be opened. Then,
                 * if the data-open tag notes a submenu to open, that menu
                 * should be opened.
                 */

                // Store the current left offset so it can be returned to when closed
                var current_left = sidebar.find(search.sidebarLeft).css("left");
                if(!!sidebar.data("closed_left") === false) {
                    sidebar.data("closed_left", "-375px");
                }

                sidebarControl.open();

                if(!!toggler.data("open")) {
                    Log.in("hasStrip");

                    /* 
                     * Prevent the default action if the menu block is meant to
                     * open the sidbar
                     */

                    Log.log("Prevent default action");
                    evt.preventDefault();

                    /*
                     * If the menu block contains any information
                     * as to the menu to open, then it needs to be
                     * opened.
                     */

                    // Fetch the menu strip to be opened that's stored 
                    // on the toggler's data
                    var area = toggler.data("open");
                    var menu_strip = $(".menu-strip."+area);

                    if(menu_strip.isNotEmpty()) {
                        Log.in("foundStrip");
                        /*
                         * If the menu strip exists, then toggle it open
                         * by clicking on its toggle button.
                         */

                        var toggle = menu_strip.find(search.toggler);
                        if(toggle.isNotEmpty()) {
                            Log.in("foundToggle");

                            // As there is a toggle, click it.

                            toggle.click();

                            Log.out();
                        } else {
                            Log.in("noToggleFound");
                            Log.out();
                        }

                        Log.out();
                    }

                    Log.out();
                }

                Log.out();
            }
            Log.out();
        }
        Log.out();
    });

    /**
     *  Ready function to set up collapsible navigation objects
     */
    function ready() {
        $(".default-open").removeClass('default-open');
        $(search.collapsible).each(function() {
            /*
             * Set up the collapsing of each of the tagged elements
             */

            var toggle = UUID.generateFor(this);
            var Log = toggle.data("log");

            var parent = toggle.parent();
            var toggler = parent.find(search.toggler);

            toggler.on("click", function(evt) {                 
                Log.in("click");

                /*
                 *  If there is a drop down, then there needs to be a stop on any
                 *  attempt to send to a new page!
                 */
                Log.log("prevent default action");
                evt.preventDefault();

                if(toggle.data("collapsible") == "") {
                    Log.in("justCollapse");

                    var Toggle = {
                        getToggle: function(el) {
                            var Log = Console.to("Toggle").in("getToggle(" + UUID.get(el) +")");

                            var group_parent = el.parent();
                            var toggle = group_parent.find(search.toggler);
                            if(toggle.isNotEmpty()) { 
                                Log.log("foundToggle").out();

                                return toggle;
                            } else {
                                Log.log("noToggleFound").out();

                                return false;
                            }
                        },
                        open: function(el) {
                            var Log = Console.to("Toggle").in("open(" + UUID.get(el) +")");

                            if(!!el.data('open') == false) {
                                Log.in("canOpen");

                                el.slideDown(null, function() { myScroll.refresh(); });
                                el.parent().addClass("open");
                                el.data("open", true);

                                Log.out();
                            }

                            Log.out();
                        },
                        close: function(el) {
                            var Log = Console.to("Toggle").in("close(" + UUID.get(el) +")");

                            if(!!el.data('open') == true) {
                                Log.in("canClose");

                                el.slideUp();
                                el.parent().removeClass("open");
                                el.data("open", false);

                                Log.out();
                            }

                            Log.out();
                        },
                        toggle: function(el) {
                            var Log = Console.to("Toggle").in("toggle(" + UUID.get(el) +")");

                            if(!!el.data('open') == false) { 
                                Toggle.open(el); 
                            } else {
                                Toggle.close(el); 
                            }

                            Log.out();
                        }
                    }

                    if(!!toggle.data("open")) { 
                        Log.log("alreadyOpen");

                        Toggle.close(toggle);

                        Log.reset();
                        return;
                    }

                    Log.log("gettingGroup");
                    var group = toggle.parents("ul").first().find(search.group);
                    group.each(function(index) {
                        Log.in("processGroupIndex" + index);

                        var collapsible = $(this);
                        var last = (index == group.length - 1);

                        Toggle.close(collapsible);

                        if(last) {
                            Log.in("isLast");

                            Toggle.open(toggle);

                            Log.out();
                        }

                        Log.out();
                    });

                    Log.out();
                } else {                                                            
                    Log.in("collapseInto");

                    var menu_holder_collapsible = toggle.data("collapsible");

                    var menu_holder_class = menu_holder_collapsible.split(":")[0];
                    var index = menu_holder_collapsible.split(":")[1];

                    var menu_holder = $(".menu-holder." + menu_holder_class);
                    if(menu_holder.isNotEmpty()) {
                        Log.in("foundMenuHolder");

                        if(menu_holder.data("open")) {
                            Log.in("menuIsOpen");

                            var toggle_field = menu_holder.find(search.collapsible);

                            if(menu_holder.data("index") == index) {                    
                                Log.in("indexMatch");

                                toggle_field.first().slideUp(function() {               
                                    Log.in("emptyMenuHolder");

                                    menu_holder.empty();

                                    Log.out();
                                });

                                menu_holder.data("open", false);

                                Log.out();
                            } else {
                                Log.in("differentIndex");

                                var cloned_toggle = toggle.clone();
                                cloned_toggle.hide();

                                if(index > menu_holder.data("index")) {
                                    Log.in("indexGreaterThan");

                                    if(cloned_toggle.children().isNotEmpty()) { 
                                        menu_holder.append(cloned_toggle); 
                                    }

                                    Log.out();
                                } else {
                                    Log.in("indexLessThan");

                                    if(cloned_toggle.children().isNotEmpty()) { 
                                        menu_holder.prepend(cloned_toggle);
                                    }

                                    Log.out();
                                }

                                toggle_field.addClass("remove");

                                toggle_field.toggle(function() {
                                    Log.in("removeToggleField");

                                    menu_holder.find(".remove").remove();

                                    Log.out();
                                });

                                cloned_toggle.toggle("slide");
                                menu_holder.data("index", index);

                                Log.out();
                            }
                        } else {
                            Log.in("menuIsClosed");

                            var cloned_toggle = toggle.clone();
                            if(cloned_toggle.children().isNotEmpty()) {
                                cloned_toggle.hide();
                                menu_holder.html(cloned_toggle);
                                cloned_toggle.slideDown();
                                menu_holder.data("open", true);
                                menu_holder.data("index", index);
                            }

                            Log.out();
                        }

                        Log.out();
                    } else {
                        Log.log("cannotFindMenuHolder");
                    }

                    Log.out();
                }
                Log.reset();
            });
            Log.reset();
        });
    }

    $(window).load(ready);

})();

不幸的是，CSS 遍布各处，很难整合。如果您可以检查站点并通过检查元素了解样式，看看是否可以找到 javascript 或 css 修复程序，我们将不胜感激。

谢谢。

Answer 1

你的 .sidebar 有 position:fixed。这为我修复了它。只需在移动设备上删除此样式，您可能还想降低其高度。