由于javascript jQuery创建的容器CSS，iScroll 4停止工作 [英] iScroll 4 stops working because of container CSS created by javascript jQuery
问题描述
我在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的iScrolls硬编码高度，那么它的工作正常。
但它是由javascript创建的动态高度。而iScroll忽略它。但是当您在桌面浏览器上调整视口大小时，它会启动并工作。
这是创建动态高度的脚本。
脚本>
$（document）.ready（function（）{
$（＃latest-tweet）。tweet（{
count：1，
username： [motocomdigital]，
load_text：twitter ...
}）bind（loaded，function（）{
var tweetheight = $（＃tweet-area ）.height（）;
$（＃sidebar-wrapper）。css（{bottom：tweetheight}）;
}）;
}）;
< / script>
忽略twitter脚本 - 绑定的函数确定包含DIV的高度之后。 / p>
包含DIV的'scroller''上的高度由这些CSS值决定：top：0px和'bottom'值。但是底层的CSS值是动态的。
在这里查看实时项目 - 这是破碎的时候，点击菜单可以看到边栏中的滚动条。
然后看到下面的同一个项目，但是在头部添加了一个硬编码的底层CSS值，并删除了脚本。这样做很好。
这意味着iScroll忽略了底部的CSS值（但是当您调整视口大小时开始工作，但没有好的一个设备）
任何帮助将不胜感激
谢谢Josh
更新，这项工作 - 但是每一次都会工作？
< script>
var myScroll;
函数loaded（）{
setTimeout（function（）{
myScroll = new iScroll（'wrapper-sidebar-left'，{
scrollbarClass：'滚动条'，
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？
您需要更改代码，因为您使用 myScroll 为多个元素。因此，例如，如果您有1个元素需要iScrolled：
< script type =text / javscript>
var myScroll;
function loaded（）{
myScroll = new iScroll（'sidebar-wrapper'）;
}
document.addEventListener（'touchmove'，function（e）{e.preventDefault（）;}，false）;
document.addEventListener（'DOMContentLoaded'，loaded，false）;
$（function（）{
$（＃latest-tweet）。tweet（{
count：1，
username：[motocomdigital] ，
load_text：searching twitter ...
}）bind（loaded，function（）{
//如http上的方法部分所述cubiq.org/iscroll
setTimeout（function（）{myScroll.refresh（）}，0）;
}）;
}）;
< / 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>
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:
<script type="text/javscript">
var myScroll;
function loaded() {
myScroll = new iScroll('sidebar-wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
$(function() {
$("#latest-tweet").tweet({
count: 1,
username: ["motocomdigital"],
loading_text: "searching twitter..."
}).bind("loaded", function(){
// as described on the "Methods" section on http://cubiq.org/iscroll
setTimeout(function () { myScroll.refresh() }, 0);
});
});
</script>
这篇关于由于javascript jQuery创建的容器CSS，iScroll 4停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
