在Window 8商店应用中垂直滚动

Question

我正在使用HTML5和Javascript开发一个Windows 8商店应用。我想垂直滚动一些div内容。我使用以下内联css来执行此操作

<div style="height:100%;overflow-y:scroll;">

//Content

</div>

但它只显示滚动栏，我无法滚动内容。

这就是我如何获得我的滚动条，因为你可以看到最后一个输入框显示了一半而我无法滚动它。

Answer 1

我想我找到了解决这个问题的快速解决方案。而不是给高度100％。只需给出覆盖当前窗口的高度（以像素为单位）。

例如：

如果您的屏幕高度为780px，并且标题覆盖了80px的高度。所以如果你想在剩余的700px中使用滚动。使用以下代码： -

<div style="height:700px;overflow-y:scroll;">

//Content

</div>

希望它也适合你。但Stil寻找替代解决方案，如果有的话。

Answer 2

通常，这不是Windows Universal App问题，而只是HTML / javascript问题。默认情况下，浏览器滚动超出浏览器窗口的正文内容，但在UWP JS应用程序中，默认情况下不提供滚动。因此，要使内容可滚动，您需要提供高度，但高度可能是动态的。使用javascript，您可以根据用户的屏幕尺寸更适当地设置高度。

基本上，在主javascript文件中，您可以设置可滚动区域的高度。

body {
    overflow-y: scroll;
}

function setElementToRemainingWindowHeight(selector, usedHeight) {
    $(selector).height($(window).innerHeight() - usedHeight);
}

function calculateUsedHeight() {
    return $('.header').innerHeight() + $('footer').innerHeight();
}

$(function(){
    setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
    window.resize(function() {
        setElementToRemainingWindowHeight('#scrollingRegion', calculateUsedHeight());
    });
});

您可以移动代码以响应应用中可能导致可滚动区域发生变化的任何事件（可能正在进入和退出周围布局，或者其他任何事情）。

根据添加列表中项目的时间以及添加方式，您的要求可能会发生变化。请参阅this post（我写的）关于如何更动态地执行此操作...