javascript 无法与 onsen.ui 一起使用答案

【问题标题】：javascript no working with onsen.uijavascript 无法与 onsen.ui 一起使用
【发布时间】：2017-02-02 19:40:21
【问题描述】：

javascript 不适用于 onsen.ui 框架例如，当我向下滚动但没有工作和任何 javascript 时，我使用 javascript 显示位置 px body ...当我删除链接时 (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>

【问题讨论】：

标签： javascript html css onsen-ui

【解决方案1】：

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

简短的版本是：

您需要使用元素.page__content 而不是窗口
您可以访问其scrollLeft 和scrollTop 属性
要水平滚动，您需要一些更宽的子元素
使用ons.ready 进行初始化代码

在引用的链接中，您可以找到更详细的说明。

修改后的sn-p：

<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>

【讨论】：

谢谢 (llia) 帮助了我，另一个问题也来自我的朋友.. 现在我希望你给我一个基础，如果在 (onsen ui) 外部使用 (javascript)我为什么要换
@mody 我认为您的评论被意外切断了。您可以在 sn-p 中看到代码 - ons.ready 调用是“魔术”发生的地方。至于为什么需要使用（更改为）.page__content 元素 - 这是因为这是使用 Onsen UI 时发生滚动事件的地方。而且滚动事件是一个特殊事件，它不会传播到窗口，因此您无法从那里捕获它。由于评论被切断，我不确定你的意思。我想我会 afk 大约 22 小时，所以如果我没有正确回答，我明天可以再次回复。
我不知道如何感谢您的大力帮助thanxs llia ...我的意思是，如果我添加另一个部分（javascript）应该更改哪些规则.. 例如：1- （窗口必须转换为 page__content） 2-使用 ons-ready() 3-？还有其他规定吗？？
现在the example 不工作.. 我怎么办？？
@mody 看来你已经明白了 - 你唯一错过的是在你的例子中你有多个页面，所以你可以给主页一个 id 并监听该页面上的滚动- fiddle - 例如<ons-page id="mainPage">，然后是#mainPage .page__content。如果你想要一个水平滚动不要忘记有更宽的东西。此外，如果您还有其他问题，也可以在community.onsen.io 讨论它们