移动设备中的菜单不会滚动
Menu when in mobile will not scroll
我正在努力修复一个由我以外的人构建的网站。我需要修复移动视图中的菜单滚动。到目前为止，我真正知道的是，如果您调整浏览器大小，那么您突然可以滚动，但如果您使用的是移动设备，则情况并非如此。该网站名为 clasado.com 如果您通过减少浏览器视图端口更改为移动视图，然后打开菜单，您将看到在调整浏览器大小之前无法滚动。此菜单的 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修复程序，那将不胜感激。
谢谢。
您的侧边栏的位置：固定。这为我修复了它。只需在移动设备上删除此样式，您可能还想降低其高度。
相关文章：
- 如何在 jQuery 中为链接我的“活动”滚动菜单创建例外
- JQuery UI 自动完成在滚动菜单时在文本框中显示 [对象对象]
- Javascript滚动菜单，仅在页面向下的特定方式后开始
- JQuery 一页自动滚动菜单
- 在可滚动菜单外放一个框
- 带有可滚动菜单的下拉菜单.无法修复
- 如何添加背景颜色仅滚动菜单
- "未捕获引用错误:jquery未定义“-向下滚动菜单
- JavaScript滚动菜单
- 单击一页滚动菜单时更改URL哈希值
- 将js数组放入extjs可滚动菜单的最佳方式是什么
- 水平滚动菜单(手动）
- 滚动菜单跟踪问题
- 偏移时隐藏的粘性滚动菜单(）.底部-500
- Jquery问题--滚动菜单
- 在滚动菜单上更改类，先单击问题
- 使用元素的高度改变页面滚动菜单的CSS
- 使用position: fixed制作滚动菜单
- 重新加载时的可滚动菜单位置
- 使用淡出/淡出与向上滚动菜单
