javascript无法与onsen.ui一起使用

Question

javascript不适用于onsen.ui框架，例如，当我向下滚动（但链接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>

Answer 1

您的问题几乎是该问题的重复，因此您可能有兴趣在此查看我的答案。

简短的版本是：

您需要使用元素.page__content而不是window
您可以访问其scrollLeft和scrollTop属性
要水平滚动，您需要一些更宽的子元素
使用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>

javascript无法与onsen.ui一起使用

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-09-25 20:25:10

javascript无法与onsen.ui一起使用

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-09-25 20:25:10

解决方案1
0 已采纳 2016-09-25 20:25:10