皮卡布 - 计算高度 [英] Pikabu - Miscalculating Height

问题描述

我正在为一个正在使用的网站创建一个画布移动菜单，将替换旧的bug版本。我已经解决了 https://github.com/mobify/pikabu ，因为它完成了我需要的一切，但我有一个麻烦计算错误的高度。

您可以在 http://verypc.very-dev.co.uk/

您需要收缩菜单，然后点击左上角的汉堡包。菜单会滑出，但您会注意到，您仍然可以滚动页面的正文。额外的高度来自pikabu和它计算的内联样式。

我最初的想法是，这是我的CSS中的东西，可能会导致额外的高度，但我避风港

我试图避免编辑Pikabu本身，但如果必要，这不是一个巨大的问题。

解决方案

这似乎是一个功能的pikabu ..（如果你通过 Pikabu.prototype.setHeights 函数，你可以看到为windowHeight返回的值不正确）

行514：var windowHeight = this.device.isNewChrome？ window.outerHeight：chrome（window.outerHeight：$（window）.height（）;

window.outerHeight包括浏览器工具栏的高度， etc（〜95px）

你可能需要删除这一行，以便它只提供 window.outerHeight 或者做一些更好的设备嗅探，这样只会触发移动

I'm trying to create an off canvas mobile menu for a website I'm working on which will replace an old buggy version. I've settled on https://github.com/mobify/pikabu as it does everything I need but I'm having a little trouble with it calculating the wrong height.

You can see the issue at: http://verypc.very-dev.co.uk/

You'll need to shrink the menu down, then hit the 'hamburger' at the top left. The menu slides out but you'll notice that you can still scroll the body of the page. The extra height is coming from pikabu and an inline style that it calculates.

My initial thought is that this is something within my CSS that's possibly causing the extra height but I haven't been able to track it down successfully.

I'm trying to avoid editing Pikabu itself but it's not a huge problem to do so if necessary.

Any help would be great!

解决方案

this appears to be a 'feature' of pikabu.. (if you step through the Pikabu.prototype.setHeights function you can see the value being returned for windowHeight is incorrect)

line 514: var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();

window.outerHeight on chrome includes the height of the browser toolbar, address bar etc (~95px)

you will probably need to either remove this line so that it just supplies window.outerHeight or do some better device sniffing so that this only triggers on mobile

这篇关于皮卡布 - 计算高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！