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
- 您可以访问其
scrollLeft
和 scrollTop
属性
- 要水平滚动,您需要一些更宽的子元素
- 初始化代码使用
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>
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 - 您可以访问其
scrollLeft
和scrollTop
属性 - 要水平滚动,您需要一些更宽的子元素
- 初始化代码使用
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>