Ich versuche, ein jQuery-Plugin für eine mobile Website zu erstellen, die einen div-Container in einen scrollbaren Container verwandelt. Ich beende dies, indem ich alle Kinder, die sich im div-Container befinden, in einen anderen div-Container, der absolut positioniert ist, einlege. Dann modifiziere ich die oberen oder linken CSS-Stile des Innen-Divs, um zu simulieren, den Text nach oben oder unten oder nach links und rechts zu bewegen. Ich verwende Touch-Ereignis-Listener, um zu bestimmen, wann das Scroll-Div verschoben werden soll.jQuery Scrollbare Div für mobile Websites
Allerdings habe ich einige Probleme bei der Einstellung der Breite() meiner Innen Scroll Div. Hier ist ein Beispiel des Codes:
myObj.ready(function(){
myObj.css({ 'position' : 'relative', 'overflow' : 'hidden' }).wrapInner('<div id="scrollCntr">');
$('#scrollCntr').prepend("<img src='scrollBar.png' id='scrollBar' class='horizontal'");
$('#scrollCntr').height(myObj.height());
if (config.width <= 0) {
$('#scrollCntr').children().each(function(){
if ($(this).css('display') == 'inline' || $(this).css('float') == 'left' || $(this).css('float') == 'right') {
totalWidth += $(this).width();
for(var i = 0; i < boxProps.length; i++)
if ($(this).css(boxProps[i]) != "")
totalWidth += parseInt($(this).css(boxProps[i]).replace(/px/i, '').replace(/em/i, '').replace(/pt/i, ''));
}
});
} else {
totalWidth = config.width;
}
console.log(totalWidth);
$('#scrollCntr').width(totalWidth);
console.log($('#scrollCntr').width());
});
In diesem Fall ist config.width auf 719 gesetzt und myObj ist das Container-div, das gescrollt wird. Ich bin mir nicht sicher, was das Problem ist. Ich hatte keine Probleme damit in meiner Demo, als meine Kinder Elemente nur Bilder, aber wenn ich es auf meiner mobilen Website angewendet, wo die Kinder Elemente wo Div-Boxen, hatte es Probleme. Vielleicht werden die Kinderelemente nicht rechtzeitig geladen? Aber das würde nicht erklären, warum ich die Breite des Scroll-DIV nicht einstellen kann. Es ist definitiv geladen. Ich habe keine Ahnung, was das Problem ist ...
Ich glaube, ich fand heraus, was das Problem ist. Das Container-Div wird so eingestellt, dass es angezeigt wird: None, bis eine bestimmte Aktion vom Benutzer ausgeführt wird. Daher kann er Breiten festlegen, diese Breiten können jedoch nicht abgerufen werden. Gibt es eine Möglichkeit, einen Event-Handler hinzuzufügen, auf den ich achten soll, wenn mein Container div angezeigt wird (display: block)? –