Для проблемы горизонтальной прокрутки: iOS 'Mobile Safari обычно растягивает все элементы с переполнением: авто, так как не позволяет полосы прокрутки ЛЮБЫМ способом.То же самое относится к набору фреймов, например, если вы не можете иметь фиксированную часть и прокручиваемую часть, потому что MSafari растягивает оба элемента, так что все элементы каждого видны.этот фрагмент растянут, но скрыт из-за этого свойства CSS. Единственный способ на самом деле имитировать полосы прокрутки - это использование некоторого фреймворка javascript.Лучший из них - iScroll 4 от Cubiq (http://cubiq.org/iscroll-4), который поддерживает несколько сенсорных событий и другие приятные опции.
Таким образом, вы можете сделать фрагменты кода для принятия сенсорных событий, а затем прокрутить их.горизонтальный, вертикальный или оба.
Наиболее распространенное использование:
<script charset="utf-8" type="text/javascript">
var myScroll = new iScroll('idOfWrapper', {
//various options
});
</script>
Поскольку вы получили много фрагментов (используя приведенный вами пример), вы можете применить какой-то цикл для каждого из них, используя jQuery..each ().
Давайте сделаем пример.Используя jQuery и iScroll, вы можете сделать следующее:
HTML:
Test
<!-- include jquery and iscroll -->
Header
Lorem ipsum dolor sit amet.
Another header
For example:
//This is a single-line comment
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
Наша первая программа на C ++
/*
This is a multi-line comment.
It can have multiple lines!
*/
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
/*making
vertical
scroll
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
making
vertical
scroll
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
making
vertical
scroll
//one bigger line to test one bigger line to test one bigger line to test one bigger line to test
*/
Лорем ипсум долор сит амет. CSS:
<style type="text/css">
.scrollerType {
overflow:hidden;
max-height:200px;
/* put max height you want the scroller div to have,
normally less than the device's window size, like 200px or so so.*/
}
div.divToBeScrolled {
overflow:scroll;
display:inline-block;
white-space:pre-wrap;
}
</style>
JS / jQUERY:
<script charset="utf-8" type="text/javascript">
var snippetName = new Array(); //creates a new array to make the var names for iscroll
var selfId = new Array(); //creates a new array to make the names for the scrollers
$('.syntaxhighlighter').each(function(index) { //for each '.syntaxhighlighter' and 'index' as counter
selfId[index] = 'scrollerId'+index; //creating a new id name for the container
$(this).wrap('<div id='+selfId[index]+' class="scrollerType" />'); //wrapping each '.syntaxhighlighter' with the container
var timeout = setTimeout(function(){ //yes, timeout. This to support Android mostly
snippetName[index] = new iScroll(selfId[index], { //initializing multiple iscroll's each with an index and targeting the selfId
//here you declare various options - see "Passing parameters to the iScroll" at iScroll page
//this is the best set, i think
snap: false,
momentum: true,
hScrollbar: false,
vScrollbar: false,
hScroll: true,
vScroll: true,
desktopCompatibility:true
}); //end new iScroll
},100); //100ms just bc 0ms or 1ms might not be enough
}); //end .each
</script>
Так как нам нужны iscrolls для вступления в силупосле того, как подсветка фрагмента произошла, мы можем обернуть вышеупомянутый код в функцию js и добавить его в качестве функции обратного вызова в подсветку сниппета, когда это будет сделано с цветами.
Я думаю, что это будет работать.Сделано это сейчас, но идея верна.Сегодня вечером протестирую и, если нужно, исправлю, отредактировав ответ.
Ну, думаю, все, не стесняйтесь спрашивать, не поняли ли вы вещь.
_*EDIT:*_
Исправлен код JS, добавлены коды для CSS и тест-кейс HTML.
Я сделал тест-кейс
(http://portableideas.net/myRepo/trunk/stackoverflow/www/questions_7869572.html)