javascript 没有与 onsen.ui 合作

javascript no working with onsen.ui

javascript 不使用 onsen.ui 框架 例如,我使用 javascript 来显示位置 px 主体,当向下滚动但没有工作时,任何 javascript... 当我删除 link (link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css') 他工作但有些功能不工作......任何人帮助我我厌倦了这个

<html >
  <head>
    <meta charset="UTF-8">


    <title>CodePen - Navigator</title>
    
    
    
    <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'>
    <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
    
    <script>
  window.console = window.console || function(t) {};
</script>

      <script>
    window.addEventListener("scroll", function(event) {
  
    var top = this.scrollY,
        left = this.scrollX;
  
    var horizontalScroll = document.querySelector(".horizontalScroll"),
        verticalScroll = document.querySelector(".verticalScroll");
    
    horizontalScroll.innerHTML = "Scroll X: " + left + "px";
      verticalScroll.innerHTML = "Scroll Y: " + top + "px";
        document.getElementById("input1").value=verticalScroll.innerHTML =top;
  
}, false);
        
      </script>
        

    
  </head>

  <body translate="no" >

    <ons-navigator title="Navigator" var="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="center">Simple Navigation</div>
    </ons-toolbar>
<br><br>
<div class="wrapper" style="position:fixed;">
    <div class="horizontalScroll">Scroll (x,y) to </div>
    <div class="verticalScroll">see me in action</div>
    
</div>
      <p>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br></p>
  </ons-page>
</ons-navigator>

        <script>
      ons.bootstrap();

    </script>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
      
  }
</script>

  </body>
</html>

您的问题几乎与 重复,因此您可能有兴趣查看我的答案。

简短版本是:

  • 您需要使用元素 .page__content 而不是 window
  • 您可以访问其 scrollLeftscrollTop 属性
  • 要水平滚动,您需要一些更宽的子元素
  • 初始化代码使用ons.ready

在参考的 link 中您可以找到更详细的解释。

修改后的代码段:

<html >
  <head>
    <meta charset="UTF-8">


    <title>CodePen - Navigator</title>
    
    
    
    <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'>
    <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script>
    
    <script>
  window.console = window.console || function(t) {};
</script>

      <script>
        
ons.ready(function(){
  var content = document.querySelector('.page__content');
  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>
        

    
  </head>

  <body translate="no" >

    <ons-navigator title="Navigator" var="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="center">Simple Navigation</div>
    </ons-toolbar>
<br><br>
<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>          

<p>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br></p>
  </ons-page>
</ons-navigator>

        <script>
      ons.bootstrap();

    </script>
    <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
      
  }
</script>

  </body>
</html>