浏览器同步不同步滚动
Browsersync not syncing scroll
我是gulp的新手,我正在尝试让浏览器同步工作。它似乎工作正常,除了同步滚动不起作用。任何人都可以看到我的设置可能出了什么问题。
var gulp = require('gulp'),
jade = require('gulp-jade'),
uglify = require('gulp-uglify'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
livereload = require('gulp-livereload'),
browserSync = require('browser-sync');
var outputDir = "builds/development";
gulp.task('jade', function() {
return gulp.src('src/templates/**/*.jade')
.pipe(jade())
.pipe(gulp.dest(outputDir))
.pipe(livereload());
});
// Js - to uglify use gulp js --type production ( or just leave out js to build everything )
gulp.task('js', function() {
return gulp.src('src/js/main.js')
.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
.pipe(gulp.dest(outputDir + '/js'))
.pipe(livereload());
});
// Sass - to compress use gulp sass --type production ( or just leave out sass to build everything )
gulp.task('sass', function() {
var config = {};
if ( gutil.env.type === 'production') {
config.outputStyle = 'compressed';
}
return gulp.src('src/sass/main.scss')
.pipe(sass(config))
.pipe(gulp.dest(outputDir + '/css'))
.pipe(livereload());
});
// Browser Sync ( not working 100% ... not scrolling )
gulp.task('browser-sync', function() {
browserSync({
proxy: "http://localsandbox.dev/gulptutorial/builds/development/"
});
});
// Watch
gulp.task('watch', function() {
gulp.watch('src/templates/**/*.jade', ['jade']);
gulp.watch('src/js/**/*.js', ['js']);
gulp.watch('src/sass/**/*.scss', ['sass']);
});
gulp.task('default', ['jade', 'js', 'sass', 'watch', 'browser-sync'], function () {
gulp.watch("js/*.js", ['js', browserSync.reload]);
});
您的问题可能与使用 Gulp 和 BrowserSync 观看有关。这是一个很好的参考:
"你不应该用BrowserSync + Gulp观看文件"https://github.com/shakyShane/gulp-browser-sync/issues/16#issuecomment-43597240
因此,您可能希望删除livereload(让BrowserSync处理所有内容)并将默认的Gulp任务更改为如下所示的内容:
gulp.task('default', ['jade', 'js', 'sass', 'browser-sync'], function () {
gulp.watch('src/templates/**/*.jade', ['jade', browserSync.reload]);
gulp.watch('src/js/**/*.js', ['js', browserSync.reload]);
gulp.watch('src/sass/**/*.scss', ['sass', browserSync.reload]);
});
您也可以尝试显式设置滚动(但无论如何它默认为 true):
gulp.task('browser-sync', function() {
browserSync({
proxy: "http://localsandbox.dev/gulptutorial/builds/development/"
ghostMode: {
scroll: true
}
});
});
我遇到了同样的问题,那是因为我在自己的代码中声明了一个名为scrollTo的javascript函数,它干扰了browserSync代码。我需要做的就是重命名该函数,浏览器同步滚动再次工作。
相关文章:
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 同步滚动3(+)个元素
- 同步跨度和文本区域滚动条-滚动条稍微偏离和粘贴问题
- 在 JavaScript 中同步两个滚动条
- 浏览器同步不同步滚动
- 如何同步 2 个 iframe 的滚动条
- 保持文本输入滚动同步
- 滚动时收缩标题并同步移动下面的内容
- 如何同步两列之间的滚动
- Div's滚动不同步
- 如何使同步两个 Div 滚动位置更平滑
- 是否有一个JavaScript/css的方法,使同步滚动区域类似于"meld"
- 如何同步jQuery的水平滚动条.带有滑动条内容的SerialScroll
- 我可以同步两个iframe的滚动条吗
- 如何同步两个滚动条与Javascript纯
- Javascript同步两个列表框的滚动