Для вертикальной прокрутки внутри блоков, созданных с использованием fullPage, использовать параметр:
Полный пример:
$(document).ready(function(){
$('#fullpage').fullpage({
anchors:['section-0','section-1','section-2'],
menu:'#navigation',
verticalCentered:false,
scrollOverflow:true,
afterLoad:function(anchorLink,index){
if(anchorLink=='section-0'){
$('#navigation').hide();
}
else{
$('#navigation').show();
}
},
});
});
<ul id="navigation">
<li data-menuanchor="section-1"><a href="#section-1">Section 1</a></li>
<li data-menuanchor="section-2"><a href="#section-2">Section 2</a></li>
</ul>
<div id="fullpage">
<div data-anchor="section-0" class="section section-0"></div>
<div data-anchor="section-1" class="section section-1"></div>
<div data-anchor="section-2" class="section section-2"></div>
</div>
.section-0{
background:red;
}
.section-1{
background:green;
}
.section-2{
background:blue;
}
#navigation{
position:fixed;
top:100px;
left:20px;
z-index:100;
}
#navigation li.active a{
color:red;
}
http://alvarotrigo.com/fullPage/
https://github.com/alvarotrigo/fullPage.js
body{
-ms-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
Mobile Safari (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков.
Минус этого решения:
Двойной тап по блоку больше не будет увеличивать его масштаб в рамках ширины экрана.
Если размер шрифта покажется пользователю слишком мелким, то ему придется увеличивать масштаб всей страницы и использовать свайп влево-вправо, чтобы читать текст.
https://ru.stackoverflow.com/questions/382661/Почему-ios-safari-увеличивает-шрифт
Условие в чанке, определяющее на главной ли странице находимся:
<header class="[[*id:is=`[[++site_start]]`:then=`index`:else=`inside`]]">
или
<header[[*id:is=`[[++site_start]]`:then=``:else=` class="inside"`]]>
Чтобы убрать закругленные углы и другие стандартные стили Safari:
-webkit-appearance: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
В примере таблицы в контенте расположены внутри тега article
$(document).ready(function(){
$(".article table").wrap('<div class="content_table"></div>');
});
article .content_table{
overflow-x:auto;
}