求助：解决Blogger Mosaic模板移动端页面自动上滚问题

嘿，我之前碰到过Blogger Mosaic动态视图的类似滚动问题，结合你描述的情况——强制移动端显示桌面视图后滚动跳顶，给你几个针对性的解决方案，你可以逐个试试：

方案一：阻止滚动事件冲突 #

Mosaic模板的自定义滚动逻辑大概率和移动端浏览器的原生滚动触发了冲突，试试在模板的<head>标签里添加这段JS代码：

<script type="text/javascript">
document.addEventListener('touchmove', function(e) {
    // 当页面已经离开顶部位置时，阻止事件冒泡
    if (document.scrollingElement.scrollTop > 0) {
        e.stopPropagation();
    }
}, { passive: false });
</script>

原理是：模板内部可能监听了全局触摸滚动事件，当页面不在顶部时，我们阻止事件传递到模板的滚动逻辑里，避免它强制把页面拉回顶部。

方案二：调整动态视图的滚动配置 #

你替换classic为mosaic的代码只是加载了对应脚本，但没有调整移动端的滚动参数，试试修改你的现有代码，加上初始化配置：

<b:if cond='data:blog.isMobileRequest'>
  <script expr:src='data:blog.dynamicViewsScriptSrc + "/js/mosaic.js"' type='text/javascript'/>
  <script type="text/javascript">
    // 延迟执行确保mosaic.js加载完成
    window.setTimeout(function() {
      if (window.DynamicViews) {
        // 关闭顶部锁定，开启平滑滚动
        DynamicViews.setConfig({
          scroll: {
            lockTop: false,
            smoothScroll: true
          }
        });
      }
    }, 1000);
  </script>
</b:if>

这样可以覆盖Mosaic模板默认的滚动锁定配置，避免滚动时触发自动回顶的逻辑。

方案三：强制使用原生滚动 #

有些动态视图模板会自定义滚动容器，和移动端的原生滚动兼容不好，试试添加这段CSS到模板的<head>里：

<style type="text/css">
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.dv-container {
  height: auto !important;
  overflow: visible !important;
}
</style>

这段CSS会强制页面使用浏览器原生滚动，覆盖模板自带的自定义滚动容器样式，从根源上避免冲突。

小提示 #

如果单个方案效果不好，可以试试组合使用（比如方案一+方案三），修改后记得保存模板，然后清空移动端浏览器的缓存再测试——Blogger经常会缓存旧的静态资源，导致修改不生效。

内容的提问来源于stack exchange，提问作者firoze