浏览器同步滚动不能跨浏览器工作

Question

几天来我一直在尝试用broswersync解决这个问题。在这方面的任何帮助将不胜感激。

我的环境：

我在 windows 上，我的服务器在 Ubuntu 的一个流浪者盒子里。我打开了端口转发，并使用端口 3000 映射到我的 vagrant 上的端口 3000。所以我在主机上使用的 URL 是 http://localhost:3000/index.html, and if from outside, then http://MY_IP_ADDRESS:3000/index.html

描述：

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

滚动同步仅适用于 chrome，在桌面模式下，即，如果我打开相同的 URL in chrome in multiple windows 在桌面模式下，它工作正常。
如果我打开移动模式，在 chrome 和桌面模式下，滚动同步不起作用。
如果我在 firefox、safari、IE 上打开 link，滚动同步会不适用于它们。
我无法在不同设备之间滚动，并且通过在多个设备上打开 link 浏览器。

我的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

我也遇到了这个问题。当我在 http://localhost:3000 in my machine and http://MY_LOCAL_IP:3000 from my device, the sync wont work. Not only scroll, but clicks and from actions as well. I've tried to change the settings from http://localhost:3001 访问 URL 时（BS UI，IMO 的一个很好的补充）但它仍然无法工作。

这是我的废话任务：

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

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

Answer 2

我最近运行也遇到了这个问题。我发现我的问题是没有 html5 文档类型。

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

<!DOCTYPE html>

Answer 3

我自己也遇到过这个问题。关于导致问题的缺少 HTML5 文档类型让我查看了我自己的文档类型。

我的文档类型在那里，但我在 HTML 标签上有一个 class。删除此 class 为我恢复了滚动同步。添加 class 返回中断同步。

值得一提的是，这个问题似乎只有在 class 添加到 HTML 标签手动时才会出现。通过 DOM 操作（例如使用 Modernizr）添加的任何 classes 都不会破坏滚动同步。

运行 BrowserSync 版本 2.13.0，这是目前的最新版本。

浏览器同步滚动不能跨浏览器工作

Browser sync scroll not working across browsers

vagrant

gulp

ubuntu-14.04

browser-sync