0

我尝试通过滚动来获取 scrolltop 值，但它看起来不适用于 ons-splitter 多页。

我试图删除 ons-splitter 和 ons-template 标签，只需使用 ons-page，然后它就可以工作了。

我正在使用带有 onsenui 框架和 jquery 的科尔多瓦。谁能帮帮我吗？

这是我的代码：

<ons-splitter>
  <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
    <ons-page>
      <ons-list>
        <ons-list-item onclick="fn.load('home.html'); " tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item> 
      </ons-list>
    </ons-page>
  </ons-splitter-side>
  <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>      
<ons-template id="home.html">
  <ons-page id="home">
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Home
      </div>

        <div class="right">
        <span class="glyphicon glyphicon-time header-icon"><span class="badge"></span></span>
      </div>
    </ons-toolbar>
    <div class="page__content home-content-div" id="home-content-div">
    <ons-pull-hook class="pull-hook-home" id="pull-hook-home">
        Pull to refresh
      </ons-pull-hook>
      <ons-scroller>
      <div class="main row ons-scroller__content ons-scroller-inner" id="infinite-list-home">
        <style>
            .infinite-item {
                padding: 100px;
                background-color: aquamarine;
                margin-bottom: 20px;
            }    
        </style>
          <div class="wrapper" style="position:fixed;">
            <div class="horizontalScroll">Scroll (x,y) to </div>
            <div class="verticalScroll">see me in action</div>

        </div>

        <div style="position:absolute;width: 200%;height: 10px;"></div>  

          <div class="">
              <div class="infinite-item">1</div>
              <div class="infinite-item">2</div>
              <div class="infinite-item">3</div>
              <div class="infinite-item">4</div>
              <div class="infinite-item">5</div>
              <div class="infinite-item">6</div>
              <div class="infinite-item">7</div>
              <div class="infinite-item">8</div>
              <div class="infinite-item">9</div>
              <div class="infinite-item">10</div>
        </div>
      </div>

      </ons-scroller>
        </div>
  </ons-page>
</ons-template>    



<ons-template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
  </ons-page>
</ons-template>
<script src="lib/jquery.min.js"></script>
<script src="lib/onsenui/js/onsenui.js"></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>


  <script>

    ons.ready(function(){
      var content = document.querySelector('.home-content-div'); 
      var horizontalScroll = document.querySelector(".horizontalScroll");
      var verticalScroll = document.querySelector(".verticalScroll");

      content.addEventListener("scroll", function(e) {
    horizontalScroll.innerHTML = "Scroll X: " + content.scrollLeft + "px";
    verticalScroll.innerHTML = "Scroll Y: " + content.scrollTop + "px";
      });
    });
  </script>
4

1 回答 1

0

$('ons-page').scrollTop(0);

在我的项目中，我使用的是 ons-splitter 和 ons-template。

在任何页面中，我都可以使用诸如该行之类的代码来滚动到页面顶部。

但是，如果您需要使用滚动事件侦听器，这对我有用 $('.page__content').scroll(function() {

});

于 2017-12-29T14:45:48.337 回答