none
如何定位滚动条(HTML5)? RRS feed

  • 问题

  • 本人用HTML5开发Metro Style App过程中,遇到一个问题:如何在有横向滚动条的情况下,将滚动条定位?程序关键代码:

    <div id="pageContainer" role="listbox">

       <div class="content">...</div>

       <div class="content">...</div>

       <div class="content">...</div>

    </div>

    默认情况下,系统显示第一个content div。我想通过按钮来让系统显示窗口定位至第三个content div,请问如何实现?

    本人试图用如下代码实现,但是没有成功:

     var flexboxElement = document.getElementById('pageContainer');
     flexboxElement.currentPage = 2;

    2012年5月7日 5:58

答案

  • 微软在HTML5方向的解决方案,提供了一套WinJS的库,里面包含了一些方法, API,和控件;我个人使用下来觉得,如果本身HTML/DOM可以解决的话,WinJS可以不用,因为就其原理,他还是在DOM间进行控制。所以不用不甘心,scrollBy能解决就是好的,即使微软提供了API,他的本质还是会回到window.scrollBy的。

    假如说你的pageContainer是定义为WinJS的ListView。 那么微软确实提供了方法可以让你直接滚动:ListView.scrollTo method

    只不过目前这个方法还有点问题,需要等待其正式发布。

    还有方法,就是你可以调用 DOM的 scrollIntoView method 来将一个元素块直接Scroll到当前界面。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 jizhong 2012年5月8日 1:49
    2012年5月7日 10:12
    版主

全部回复

  • 最新进展:利用window.scrollBy函数可以解决。但是,本人有点不甘心,感觉微软在Metro style程序中,应该封装了更好的API,不知道哪位高手了解或熟悉,是否有更好的方法解决此问题,请不吝指教。真诚谢谢!!

    • 已标记为答案 jizhong 2012年5月8日 1:50
    • 取消答案标记 jizhong 2012年5月8日 1:50
    2012年5月7日 6:30
  • 微软在HTML5方向的解决方案,提供了一套WinJS的库,里面包含了一些方法, API,和控件;我个人使用下来觉得,如果本身HTML/DOM可以解决的话,WinJS可以不用,因为就其原理,他还是在DOM间进行控制。所以不用不甘心,scrollBy能解决就是好的,即使微软提供了API,他的本质还是会回到window.scrollBy的。

    假如说你的pageContainer是定义为WinJS的ListView。 那么微软确实提供了方法可以让你直接滚动:ListView.scrollTo method

    只不过目前这个方法还有点问题,需要等待其正式发布。

    还有方法,就是你可以调用 DOM的 scrollIntoView method 来将一个元素块直接Scroll到当前界面。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 jizhong 2012年5月8日 1:49
    2012年5月7日 10:12
    版主
  • 好的。我会认真研究您提到的这2个方法的。谢谢版主回答!
    2012年5月8日 1:48