几天来我一直在尝试使用 broswersync 解决这个问题。对此的任何帮助将不胜感激。
我的环境:
我在 Windows 上，我的服务器在 Ubuntu 上，位于一个 vagrant box 中。我打开了端口转发，并使用端口 3000 映射到我的 vagrant 上的端口 3000。 所以我从主机使用的 URL 是 http://localhost:3000/index.html ，如果从外部，则 http://MY_IP_ADDRESS:3000/index.html
描述:
我有 CSS 注入(inject)、重新加载、表单同步、点击，可以在所有浏览器和设备上工作。 不起作用的是同步滚动，下面是场景。
- 滚动同步仅适用于 Chrome，在桌面模式下，即，如果我打开 在桌面模式下的多个窗口中，chrome 中的相同 URL 可以正常工作。
- 如果我打开了移动模式、Chrome 和桌面模式，则滚动同步不起作用。
- 如果我在 firefox、safari、IE 上打开链接，滚动同步不会 不适用于它们。
- 我无法在不同设备之间滚动并且 通过在多个设备上打开链接来访问浏览器。
我的咕噜声:
我在 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);
});
感谢您提前提供的帮助..
最佳答案
我最近也遇到了这个问题。我发现我的问题是没有 html5 文档类型。
您的页面上有 html5 文档类型吗？如果没有，请尝试添加一个。
<!DOCTYPE html>
关于vagrant - 浏览器同步滚动无法跨浏览器工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29785651/