How to stop a Page from auto-scrolling UP on Mobile devices? (using Blogger Dynamic Views “Mosaic” template)

Question

My website is: https://testfnm11.blogspot.com which is based on the Blogger Dynamic Views “Mosaic” template. (I have set the template to display Desktop view on Mobile devices).

The Problem: On Mobile devices, on an open page, when I scroll down the page and then try to slowly scroll up, the page jumps instantly right to the top. Hence it is impossible to slowly scroll up a page, making it almost impossible to scroll to a particular section of the page.

This problem occurs on all Mobile devices, iOS & Android, as well as on iPad. But this problem is not present on Mac/Safari, where the page scrolls up/down properly. (I have read of people complaining that it happens on Windows PC's, but I have not verified that myself).

I would be most grateful if someone would suggest a solution to stop a Page auto-scrolling to the top, on mobile devices. (I very much like the Mosaic template, so I am reluctant to change to another template. However as it stands the template is not really usable due to this auto-scrolling issue).

The only change I have made to the HTML code is to replace the original word "classic" with "mosaic" in order to force the template to show Mosaic view on mobile.

<b:if cond='data:blog.isMobileRequest'>
        <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/mosaic.js&quot;' type='text/javascript'/>

Thank you in advance!

Best wishes, Firoze Mistry

Answer 1

This is the code that causes the scrolling problem

z.onResize=function(){clearTimeout(this.F);$(v).hasClass(u)||(this.F=setTimeout($.proxy(this.G,this),500))};

You can download the mosaic.js js from https://www.blogblog.com/dynamicviews/5e2debdf5385ddcf/js/mosaic.js then remove the code line above and place it between the following script tag

<script>
// <![CDATA[

 place the code here

// ]]>
</script>

Then, Replace <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/mosaic.js&quot;' type='text/javascript'/> <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/mosaic.js&quot;' type='text/javascript'/> with the new code. Please backup your template first.