由于 javascript jQuery 创建的容器 CSS,iScroll 4 停止工作
我在 DIV 内运行 iScroll 4,但 DIV 的高度是动态生成的,并且搞砸了 iScroll
<script src="js/iscroll/iscroll.js?v4"></script>
<script>
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper-sidebar-left');
myScroll = new iScroll('wrapper-sidebar-right');
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
如果我给包含 DIV 的 iScroll 一个硬编码的高度,那么它可以正常工作。
但它是由 javascript 创建的动态高度。 iScroll 会忽略它。但是,当您在桌面浏览器上调整视口大小时,它就会启动并工作。
这是创建动态高度的脚本。
<script>
$(document).ready(function() {
$("#latest-tweet").tweet({
count: 1,
username: ["motocomdigital"],
loading_text: "searching twitter..."
}).bind("loaded", function(){
var tweetheight = $("#tweet-area").height();
$("#sidebar-wrapper").css({ bottom: tweetheight });
});
});
</script>
忽略 twitter 脚本 - 它位于确定包含 DIV 高度的绑定函数之后。
包含 DIV 的“滚动条”的高度由以下 CSS 值决定:顶部:0px 和“底部”值。但底部的 CSS 值是动态的。
请在此处查看实时项目 - 这是它损坏的时候,单击菜单可在侧栏中查看损坏的滚动条。
然后查看下面相同的项目,但添加了硬编码的底部 CSS 值在头部,并删除脚本。这很好用。
这意味着 iScroll 忽略底部 CSS 值(但当您调整视口大小时它开始工作,但在设备上没有任何好处)
任何帮助将不胜感激
谢谢,乔什
更新,这有效 - 但它会工作吗每次?
<script>
var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapper-sidebar-left', {
scrollbarClass: 'sub-scrollbar',
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
myScroll = new iScroll('wrapper-sidebar-right');
}, 1000);
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
I'm running iScroll 4 inside a DIV, but the DIV's height is generated dynamically, and screws up iScroll
<script src="js/iscroll/iscroll.js?v4"></script>
<script>
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper-sidebar-left');
myScroll = new iScroll('wrapper-sidebar-right');
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
If I give iScrolls containing DIV a hard coded height then it works fine.
But it's a dynamic height created by javascript. And iScroll ignores it. But when you adjust the viewport size on a desktop browser, its kicks in and works.
This is the script creating the dynamic height.
<script>
$(document).ready(function() {
$("#latest-tweet").tweet({
count: 1,
username: ["motocomdigital"],
loading_text: "searching twitter..."
}).bind("loaded", function(){
var tweetheight = $("#tweet-area").height();
$("#sidebar-wrapper").css({ bottom: tweetheight });
});
});
</script>
Ignore the twitter script - it's after the binded function which is determining the height of the containing DIV.
The height on the 'scroller's' containing DIV is determined by these CSS values: top: 0px and the 'bottom' value. But the bottom CSS value is dynamic.
See live project here - this is when it's broken, click menu to see the broken scrollers in the sidebar.
Then see the same project below but with a hard coded bottom CSS value added in the head, and the script removed. And this works fine.
Which means iScroll is ignoring the bottom CSS value (but it starts working when you adjust the viewport size, but no good on a device)
Any help would be so appreciated
Thanks, Josh
UPDATE, THIS WORKS - BUT WILL IT WORK EVERYTIME?
<script>
var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll('wrapper-sidebar-left', {
scrollbarClass: 'sub-scrollbar',
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
myScroll = new iScroll('wrapper-sidebar-right');
}, 1000);
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
您尝试过 iScroll 的
refresh()
方法吗?您确实需要稍微更改一下代码,因为您将
myScroll
用于多个元素。例如,如果您有 1 个元素需要 iScrolled:have you tried the
refresh()
method for iScroll?You do need to change you code a bit because you use the
myScroll
for multiple elements. So for example if you have 1 element that needs to be iScrolled: