Onsen UI ScrollTop值不起作用

Posted 2021-05-04

我试图通过滚动来获得滚动值，但看起来它不适用于ons-splitter multipage。

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

我正在使用带有onsenui框架的cordova和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>

答案

$（“我们页）scrollTop的（0）。

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

在任何页面中，我都可以使用该行等代码滚动到页面顶部。

但是如果你需要使用滚动事件监听器，这对我来说是有用的（'。page__content'）。scroll（function（）{

});