javascriptがonsen.uiと一緒に働いていません

javascriptがonsen.uiフレームワークと連携していませんたとえば、私はリンクを削除するとリンクを削除するとjavascriptを使用して位置px bodyを表示しますが、 hrefの「スタイルシートのプリフェッチ」=「https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css」）彼が働いたが、一部の機能が動作しない...誰もが私を助けて、私はこのjavascriptがonsen.uiと一緒に働いていません

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

出典

2016-09-25 Anonymous

の疲れあなたの問題は、ほとんどの複製でありますthis oneですそこに私の答えを見ることに興味があります。

短いバージョンです：

はあなたが
が水平方向にスクロールするためにあなたには、いくつかの広い子要素を必要とするそのscrollLeftとscrollTopプロパティにアクセスすることができ、ウィンドウ
するのではなく、要素.page__contentを使用する必要があります
初期化コードにはons.readyを使用

参照リンクには、より詳細な説明があります。

修正スニペット：

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

出典

2016-09-25 20:25:10

は（lliaを）ありがとう、私を助けている、他に質問がまた私の友人から..です今私はあなたが私に塩基を得たい場合 –

@modyを変更する理由あなたのコメントが誤って切られたと思います。スニペットでコードを見ることができます。 'ons.ready'呼び出しは"魔法 "が起こる場所です。 '.page__content'要素を使う（変更する）必要がある理由は、Onsen UIを使っているときにスクロールイベントが発生するからです。そして、スクロールイベントは、ウィンドウに伝播しない例外的なイベントなので、そこからキャッチすることはできません。コメントが断ち切られて以来、私はあなたが正確に何を意味するのか分かりません。私は約22時間アフリカになるだろうと思うので、私が正しく答えることができなければ、私は明日再び答えることができます。 –

私は偉大なヘルプthanxslliaに感謝する方法を知りません...私は別のセクション（JavaScript）を変更する必要がある別のものを追加する場合は..例えば：1-（ウィンドウはpage__contentに変換する必要があります） 2回使用ons-ready（） 3-？他のルールはありますか？ –

javascriptがonsen.uiと一緒に働いていません

答えて

関連する問題