Salesforce1アプリ用にVisualforceページを開発しようとすると、スクロールがトップに戻される問題に遭遇します。
この問題はiOS版のSalesforce1アプリで発生するみたいです。回避方法がこちらで紹介されていました。
Salesforce1 - page automatically scrolls to top when user taps on a page element on iOS devices only
1) Add the following JavaScript to your page:
<script>
(function(){try{var a=navigator.userAgent;
if((a.indexOf('Salesforce')!=-1)&&(a.indexOf('iPhone')!=-1||a.indexOf('iPad')!=-1)&&(a.indexOf('OS/8')!=-1||a.indexOf('OS 8')!=-1)&&(a.indexOf('Safari')==-1)){
var s=document.createElement('style');
s.innerHTML="html,html body{overflow: auto;-webkit-overflow-scrolling:touch;}body{position:absolute;left:0;right:0;top:0;bottom:0;}";
document.getElementsByTagName('head')[0].appendChild(s);}}catch(e){}})();
</script> 2) Add the following JavaScript to your page:
<script>
var ua=navigator.userAgent;
if((ua.indexOf('Salesforce')!=-1)&&(ua.indexOf('iPhone')!=-1||ua.indexOf('iPad')!=-1)&&(ua.indexOf('OS/8')!=-1||ua.indexOf('OS 8')!=-1)&&(ua.indexOf('Safari')==-1)){
function IOS_SCROLL_BOOTSTRAP() {
var children = Array.prototype.slice.call(document.body.children),
placeholder = document.createElement('section'),
fragment = document.createDocumentFragment(),
styles,
width,
height;
children.forEach(function(c){fragment.appendChild(c);});
placeholder.appendChild(fragment);
styles = [
'width:100%;',
'height:', (window.screen.height - 42), 'px;',
'position: absolute; overflow: auto; -webkit-overflow-scrolling: touch'
].join('');
placeholder.style.cssText = styles;
document.body.appendChild(placeholder);
}
window.addEventListener('load', function (e) {
IOS_SCROLL_BOOTSTRAP();
});
}
</script>
判定処理の中に『indexOf('OS/8')』がありますが、これはバージョンを変えて対応する必要があります。除外してもとりあえず動作しました。
1)と2)の二種類が用意されているのですが、どちらかがあればいいのか両方必要なのかちょっとわからなかったのですが、両方入れておいても問題ありませんでした。
これでS1アプリでスクロールがトップに戻る問題を回避することができます。最後にこの方法で対応した場合、AngularJSの『autoscroll="true"』が反映されなくなりました。大きな問題ではないと思いますが、こういった影響があることも意識して置いたほうがよさそうです。