scrollElements not sync with angular partials

Hi there,

Issue details

I try to use browsersync as a testing tool for my angular application. I’ve got a problem with the option scrollElements who seems to not syncing elements who are in angular templates. For example, I want to sync the scroll on a div with the class .test. Browsersync synchronise the scroll event if this div is in index.html (the layout), but not if this div is in a template call with ui-router.

Steps to reproduce/test case

Launch the gulp task from a terminal and test the scroll sync between Chrome and Firefox.

Please specify which version of Browsersync, node and npm you’re running

• Browsersync [ 2.13.0 ]
• Node [ 5.11.0 ]
• Npm [ 3.8.6 ]

Affected platforms

• linux
• windows
• OS X
• freebsd
• solaris
• other (please specify which)

Browsersync use-case

• API
• Gulp
• Grunt
• CLI

for all other use-cases, (gulp, grunt etc), please show us exactly how you’re using Browsersync

var gulp = require("gulp");
var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

gulp.task('serve', function() {

  browserSync.use(browserSyncSpa({
    selector: '[ng-app]',
    history: {
      index: './index.html'
    }
  }));

  browserSync.init({
    server: {
      baseDir: './',
    },
    scrollElements: ['.test'],
    open: false,
    reloadOnRestart: true
  });
});

My app architecture:

App ----node_modules ----partials --------page1.html --------page2.html ----app.js ----gulpfile.js ----index.html ----package.json

Thanks for your help

[villelahdenvuo]

I ended up building my own plugin for BrowserSync. If you’re interested I could post a gist of it.

[villelahdenvuo]

@KBizien Here you go: https://gist.github.com/tuhoojabotti/b35768ba4daec99843e0c5cbab1885c5

To activate it you have to tell BrowserSync to use it in your build script:

browserSync.use({
    plugin() {},
    hooks: {
        // The 'client:js' hook will add your own JS file to the one used by
        // BrowserSync in the browser.
        'client:js': fs.readFileSync(`${__dirname}/browsersync-scroll-plugin.js`)
    }
});

Note: Currently this only restores scroll position when BrowserSync refreshes your page, but you should be able to extend it to sync scroll position to other instances pretty easily.