Question

我一直试图用broswersync解决这个问题几天。任何帮助都将受到高度赞赏。

我的环境：

我在Ubuntu的Windows和我的服务器上是一个流浪盒。我有端口转发，并使用端口3000映射到我的流浪汉端口3000。因此，我在主机上使用的网址是http://localhost:3000/index.html，如果是从外部开始，那么http://MY_IP_ADDRESS:3000/index.html

说明

我有CSS注入，重新加载，表单同步，点击，在所有浏览器和设备上工作。什么是不起作用的是同步滚动，下面是场景。

滚动同步仅适用于Chrome，在桌面模式下，即如果我打开在桌面模式下的多个窗口中的chrome中相同的URL，它工作正常。
如果我在Chrome和桌面模式下启用了移动模式，则滚动同步不起作用。
如果我在firefox，safari，IE上打开链接，滚动同步就可以了不适合他们。
我无法滚动浏览不同的设备浏览器通过在多个设备上打开链接。

My Gulp：

我在Windows工作，但我的服务器在vagrant / ubuntu上。这是我用于浏览器同步和监视的Gulp配置。

// Static server
gulp.task('browser-sync', function () {
        browserSync({
                server: {
                        baseDir: "www"
                },
                ghostMode: {
                        scroll: true
                }
        });
});
// Static Server + watching scss/html files
gulp.task('serve', ['scss'], function () {

        browserSync({
                server: "./www"
        });
        gulp.watch(paths.scss, ['scss',browserSync.reload]);
        gulp.watch(paths.html, ['html',browserSync.reload]);
        gulp.watch(paths.js, ['js',browserSync.reload]);
        //gulp.watch("*.html").on('change', reload);
});

感谢您的帮助..

Answer 1

我最近遇到了这个问题。我发现我的问题是没有html5 doctype。

您的网页上是否有html5文档类型？如果没有，请尝试添加一个。

<!DOCTYPE html>

Answer 2

我也偶然发现了这个问题。当我从我的设备访问http://localhost:3000处的网址并从我的设备访问http://MY_LOCAL_IP:3000时，同步无效。不仅可以滚动，还可以点击和执行操作。我试图从http://localhost:3001更改设置（BS UI，一个很好的补充IMO），但它仍然无法正常工作。

这是我的BS任务：

gulp.task('browser-sync', ['default'], function() {
  browserSync({
    server: {
      baseDir: './app'
    }
  });
});

然后我尝试从我的机器和设备访问http://MY_LOCAL_IP:3000，它按预期工作。希望这会有所帮助;）

Answer 3

我自己刚刚遇到过这个问题。 Drew's answer关于导致问题的HTML5文档类型缺失导致我查看自己的doctype。

我的doctype就在那里，但我在HTML标签上有一个类。删除此类为我恢复了滚动同步。添加课程会破坏同步。

值得一提的是，只有将类添加到HTML标记手动时才会出现此问题。通过DOM操作添加的任何类（例如使用Modernizr）都不会破坏滚动同步。

运行BrowserSync版本2.13.0，这是此时的最新版本。

浏览器同步滚动无法跨浏览器工作

3 个答案: