Fullpage.js: Import scrollOverflow

[ghost]

Hi,
I want use fullpage and overflow in my project but when I try to import overflow the console return this error IScroll is not defined(…)

My code

import $ from 'jquery'
import 'fullpage.js/vendors/scrolloverflow'
import 'fullpage.js/dist/jquery.fullpage.extensions.min'

$(document).ready(function () {
  window.IScroll = scrollOverflow
  $('#app').fullpage({
    scrollOverflow: true
  })
})

After that I tried to add this

import $ from 'jquery'
import scrollOverflow from 'fullpage.js/vendors/scrolloverflow' // edit
import 'fullpage.js/dist/jquery.fullpage.extensions.min'

$(document).ready(function () {
  window.IScroll = scrollOverflow // add
  $('#app').fullpage({
    scrollOverflow: true
  })
})

But a new error appeared
t.wheelOff is not a function(…)

[alvarotrigo]

Can you please add a reproduction somewhere?

[ghost]

hi @alvarotrigo, I'm sorry but I don't understand what you expect of me.

[alvarotrigo]

A jsfiddle or codepen where I can see an example of the issue taking place as well as your HTML markup.

[ghost]

I can't recreate my dev environnement in jsfiddle or codepen.

My html look like this

  <div id="app">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
  </div>

Fullpage.js works alone but if I want to use it with scrollOverflow it will return the errors described in my first post.

[alvarotrigo]

You should be having something inside your sections for scrollOverflow to be used.

In any case, I can't help you without a reproduction I'm afraid. But it seems your script is failing trying to get the iScroll instance from a section.

Not quite sure how the import works in your case anyways. Is that ES6 module syntax? And if so, where are you executing it? It doesn't seem to be compatible with many browsers yet according to mozilla docs.

If you are using babell.js or similar, could you show me the resulting code?

[ghost]

It is my app code output

(function() {
  'use strict';

  var globals = typeof window === 'undefined' ? global : window;
  if (typeof globals.require === 'function') return;

  var modules = {};
  var cache = {};
  var aliases = {};
  var has = ({}).hasOwnProperty;

  var expRe = /^\.\.?(\/|$)/;
  var expand = function(root, name) {
    var results = [], part;
    var parts = (expRe.test(name) ? root + '/' + name : name).split('/');
    for (var i = 0, length = parts.length; i < length; i++) {
      part = parts[i];
      if (part === '..') {
        results.pop();
      } else if (part !== '.' && part !== '') {
        results.push(part);
      }
    }
    return results.join('/');
  };

  var dirname = function(path) {
    return path.split('/').slice(0, -1).join('/');
  };

  var localRequire = function(path) {
    return function expanded(name) {
      var absolute = expand(dirname(path), name);
      return globals.require(absolute, path);
    };
  };

  var initModule = function(name, definition) {
    var hot = null;
    hot = hmr && hmr.createHot(name);
    var module = {id: name, exports: {}, hot: hot};
    cache[name] = module;
    definition(module.exports, localRequire(name), module);
    return module.exports;
  };

  var expandAlias = function(name) {
    return aliases[name] ? expandAlias(aliases[name]) : name;
  };

  var _resolve = function(name, dep) {
    return expandAlias(expand(dirname(name), dep));
  };

  var require = function(name, loaderPath) {
    if (loaderPath == null) loaderPath = '/';
    var path = expandAlias(name);

    if (has.call(cache, path)) return cache[path].exports;
    if (has.call(modules, path)) return initModule(path, modules[path]);

    throw new Error("Cannot find module '" + name + "' from '" + loaderPath + "'");
  };

  require.alias = function(from, to) {
    aliases[to] = from;
  };

  var extRe = /\.[^.\/]+$/;
  var indexRe = /\/index(\.[^\/]+)?$/;
  var addExtensions = function(bundle) {
    if (extRe.test(bundle)) {
      var alias = bundle.replace(extRe, '');
      if (!has.call(aliases, alias) || aliases[alias].replace(extRe, '') === alias + '/index') {
        aliases[alias] = bundle;
      }
    }

    if (indexRe.test(bundle)) {
      var iAlias = bundle.replace(indexRe, '');
      if (!has.call(aliases, iAlias)) {
        aliases[iAlias] = bundle;
      }
    }
  };

  require.register = require.define = function(bundle, fn) {
    if (typeof bundle === 'object') {
      for (var key in bundle) {
        if (has.call(bundle, key)) {
          require.register(key, bundle[key]);
        }
      }
    } else {
      modules[bundle] = fn;
      delete cache[bundle];
      addExtensions(bundle);
    }
  };

  require.list = function() {
    var list = [];
    for (var item in modules) {
      if (has.call(modules, item)) {
        list.push(item);
      }
    }
    return list;
  };

  var hmr = globals._hmr && new globals._hmr(_resolve, require, modules, cache);
  require._cache = cache;
  require.hmr = hmr && hmr.wrap;
  require.brunch = true;
  globals.require = require;
})();

(function() {
var global = window;
var process;
var __makeRelativeRequire = function(require, mappings, pref) {
  var none = {};
  var tryReq = function(name, pref) {
    var val;
    try {
      val = require(pref + '/node_modules/' + name);
      return val;
    } catch (e) {
      if (e.toString().indexOf('Cannot find module') === -1) {
        throw e;
      }

      if (pref.indexOf('node_modules') !== -1) {
        var s = pref.split('/');
        var i = s.lastIndexOf('node_modules');
        var newPref = s.slice(0, i).join('/');
        return tryReq(name, newPref);
      }
    }
    return none;
  };
  return function(name) {
    if (name in mappings) name = mappings[name];
    if (!name) return;
    if (name[0] !== '.' && pref) {
      var val = tryReq(name, pref);
      if (val !== none) return val;
    }
    return require(name);
  }
};
require.register("initialize.js", function(exports, require, module) {
"use strict";
'use strict';

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

require('fullpage.js/vendors/scrolloverflow');

require('fullpage.js');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

  (0, _jquery2.default)('#app').fullpage({
    scrollOverflow: true
  });
});});

;require.alias("process/browser.js", "process");process = require('process');require.register("___globals___", function(exports, require, module) {

});})();require('___globals___');


//# sourceMappingURL=app.js.map

[alvarotrigo]

It seems you are using require.js?
If so, this issue is a duplicated of https://github.com/alvarotrigo/fullPage.js/issues/2250

The problem when using require is that makes dependencies compulsory as far as I know.
And scrollOverflow shouldn't be compulsory.

It seems to be some kind of trick, but I didn't look at it very much to be honest.

My recommendation? Do what require.js recommends and do not use require.js for production.
Use minification + combination and this would solve your issue.

Once you are finished doing development and want to deploy your code for your end users, you can use the optimizer to combine the JavaScript files together and minify it. In the example above, it can combine main.js and helper/util.js into one file and minify the result.

[ghost]

Same problem with vuejs2 / webpack.

So, what modern tools can I use with fullpage.js ?

[alvarotrigo]

An easy trick would be to mix the two files.
Just copy the content of scrolloverflow.min.js and paste it at the very start of fullpage.extension.min.js.

That should do it I guess ?

Haven't tried webpack or vuejs2 and got not reports regarding this issue with them.
But as I said, concatenating code seems the right solution to me. You can do it using Gulp, Grunt, Webpack, node.js... whatever you prefer :)

[ghost]

Same error when I paste scrolloverflow inside fullpage
IScroll is not defined(…)

[aalenliang]

After some try, I make scrolloverflow: true worked with webpack.

Firstly, for fullpage.js and scrolloverflow.js to find jQuery or $ as a global variable.

// webpack.config.js
...
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
        }),
    ],
...

Then, to solve the t.wheelOff is not a function(…) issue, there is something wrong in scrolloverflow.js, to make it worked, I changed function IScroll (el, options) { ... } to window.IScroll = function () {...}.

Finally, import scrolloverflow.js before full page.js.

// index.js
import './scroll';  // My changed version of scrolloverflow.js
import 'fullpage.js';

$(document).ready(() => {
    $('#fullpage').fullpage();
});

And it worked.

[WIzeh]

@aalenliang i follow you instruction, but i've a new error after this :

jquery.fullpage.js:2854 fullPage: The option 'scrollOverflow:true' requires the file 'scrolloverflow.min.js'. Please include it before fullPage.js.

Just after add window.IScroll = function () {...}

[alvarotrigo]

@WIzeh are you using the latest version of scrolloverflow and fullpage.js?

[WIzeh]

I think yes,
Scrolloverflow.js -> Customized version of iScroll.js 0.0.2
Fullpage.js -> fullPage 2.9.5

[aalenliang]

@WIzeh Sorry I didn't mention the version, I'm using
Scrolloverflow.js -> Customized version of iScroll.js 0.0.5, copied from the source code from this repo.
Fullpage.js -> fullpage.js 2.9.5

I create a demo https://github.com/aalenliang/fullpage-with-webpack-demo

[WIzeh]

Perfect!! Thx