IScroll not defined when loading with RequireJS?

Question

Hi we're using iScroll for a BannerSlider on a customer site and everything works fine on my local copy but we're seeing IScroll is not defined(...) when trying to call new IScroll xxx on our magento 2 site. I know its something to do with the Require.js not allowing the IScroll to be defined globally and so I was wondering if there was a solution to this?

Below is the code I've used:

<?php if($_slideShow = $block->getSlideshowData()): ?>
<?php 
$_slideshowHelper = $this->helper('vendor\Slideshow\Helper\Data');
$_helperImage = $this->helper('vendor\Slideshow\Helper\Image');
$_images = $_slideshowHelper->decodeJson($_slideShow['content']);
$_parameters = $_slideshowHelper->decodeJson($_slideShow['parameters']);
$classid = md5(json_encode($block->getData()));
$width = $_parameters['width'] ? $_parameters['width'] : 1280;
$height = $_parameters['height'] ? $_parameters['height'] : 720;
?>
<?php if($_images): ?>
<?php $_firstImage = current($_images); ?>
<div id="wrapper" class="content-wrapper">
 <div id="inner-wrapper" class="inner-wrapper" >
 <div class="std">
 <div class="wide left parallax">
 <div class="column-1 white" data-title="#" data-text="SHOP NOW" data-color="" data-target="_self" >
 <div id="image" class="image" data-url="#"> 
 <a href="#" id="bg" title="" target="_self"><img draggable="false" src="https://example.co.uk/pub/media/vendor/slideshow/cache/1280x720/1/_/1.jpg" alt="#"></a>
 </div>
 </div> 
 <div id="image-name" class="image-name">
 <a id="wrap-link" class="wrap-link" href="#" target="_self">
 <div class="wrap-text iscroll">
 <div class="image-subtitle">The Definitive 2018 Collection</div>
 </div>
 </a>
 </div>
 </div>
 <div class="wide left parallax">
 <div class="column-1 white" data-title="#" data-text="SHOP NOW" data-color="" data-target="_self" >
 <div id="image" class="image" data-url="#"> 
 <a href="#" id="bg" title="" target="_self"><img draggable="false" src="https://example.co.uk/pub/media/vendor/slideshow/cache/1280x720/2/_/2_1.jpg" alt="#"></a>
 </div>
 </div> 
 <div id="image-name" class="image-name">
 <a id="wrap-link" class="wrap-link" href="#" target="_self">
 <div class="wrap-text iscroll">
 <div class="image-subtitle">Fan Club? Join our exclusive list.</div>
 </div>
 </a>
 </div>
 </div>
 <div class="wide left parallax">
 <div class="column-1 white" data-title="#" data-text="SHOP NOW" data-color="" data-target="_self" >
 <div id="image" class="image" data-url="#"> 
 <a href="#" title="" target="_self"><img draggable="false" src="https://example.co.uk/pub/media/vendor/slideshow/cache/1280x720/3/_/3_1.jpg" alt="#"></a>
 </div>
 </div> 
 <div id="image-name" class="image-name">
 <a id="wrap-link" class="wrap-link" href="#" target="_self">
 <div class="wrap-text iscroll">
 <div id="position" class="image-subtitle">EUROPE'S LARGEST</div>
 </div>
 </a>
 </div>
 </div>
 <div class="wide left parallax">
 <div class="column-1 white" data-title="#" data-text="SHOP NOW" data-color="" data-target="_self" >
 <div id="image" class="image" data-url="#"> 
 <a href="#" id="bg" title="" target="_self"><img draggable="false" src="https://example.co.uk/pub/media/vendor/slideshow/cache/1280x720/4/_/4.jpg" alt="#"></a>
 </div>
 </div> 
 <div id="image-name" class="image-name">
 <a id="wrap-link" class="wrap-link" href="#" target="_self">
 <div class="wrap-text iscroll">
 <div id="position" class="image-subtitle">example' Signature Showrooms</div>
 </div>
 </a>
 </div>
 </div>
 </div>
 </div>
 <!-- END REVOLUTION SLIDER -->
 <script type="text/javascript">
 require(['jquery','iscroll','iscrollprobe','domReady!'],function($){ 
 var myScroll;
 var globalScrollTop = 0;
 var labels = $('.image-name');
 var winHeight = $(window).height();
 var baseLabelPosition = (winHeight - labels.eq(0).outerHeight()) / 2;
 var scrollTop = $(document).scrollTop();
 var container = ".content-wrapper";
 function updatePosition () {
 position.innerHTML = this.y>>0;
 }
 var initLabelPositionsAndVars = function () {
 $('.inner-wrapper > .image-name, .std > .image-name').remove();
 $('.wide.left').each(function(){
 if ( $(this).find('.image-name').length > 0 ) {
 $('.image-name').css('font-weight', 'bold');
 console.log('image-name');
 }
 });
 if (typeof myScroll !== 'undefined') {
 globalScrollTop = myScroll.y;
 }
 if ((typeof collectionLoader === 'undefined')&& (!$("body").hasClass("catalogsearch-result-index"))) {
 labels.each(function () {
 var parent = $(this).parent().hasClass('new-campaign') || $(this).parent().hasClass('page-show') ? $(this).parent() : $(this).parents('.wide.left').eq(0);
 var baseTop = baseLabelPosition - (parent.offset().top - globalScrollTop);
 $(this)
 .data('base-top', baseTop)
 .css({
 'top': baseTop
 });
 });
 }
 }
 var updateLabelPositions = function (scrollTop) {
 if (typeof scrollTop === 'undefined' && typeof myScroll !== 'undefined') {
 scrollTop = myScroll.y;
 }
 if ($('.image-name').length) {
 if (($('body').attr("class").indexOf('cms-home') !== false || $('body').hasClass('cms-show') || $('body').hasClass('cms-boutiques')) && $(window).width() < 768) {
 labels.attr('style', '');
 labels.each(function () {
 var ref = $(this).parent().find('img').first();
 var top = (ref.height() - $(this).outerHeight()) / 2;
 $(this).css({
 'top': top,
 'margin-top': 0
 });
 });
 } else {
 labels.each(function () {
 $(this).show().css('top', $(this).data('base-top') - scrollTop);
 });
 }
 }
 }
 var initCustomScrollbar = function () {
 if (typeof IScroll === 'undefined') {
 return;
 }
 // if user has already scrolled the page, keep offset.
 var cachedOffset = $(document).scrollTop();
 $(container).css('overflow', 'hidden');
 $('.content-wrapper').css('overflow', 'hidden');
 myScroll = new IScroll(container, {
 probeType: 3,
 preventDefault: true,
 preventDefaultException: {
 tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A|IMG|FORM)$/
 },
 //mouseWheel: (Modernizr.touch) ? false : true,
 mouseWheel: true,
 bounce: false,
 fadeScrollbar: true,
 scrollbars: true,
 interactiveScrollbars: true,
 deceleration: 0.006,
 click: true,
 tap: true,
 useTransition: true
 });
 myScroll.on("scroll", updateLabelPositions);
 if (cachedOffset > 0) {
 myScroll.scrollTo(0, - cachedOffset);
 }
 $('.std').resize(function () {
 myScroll.refresh();
 });
 }
 initCustomScrollbar();
 initLabelPositionsAndVars();
 updateLabelPositions(0);
 });
 </script>
 <?php endif; ?>
<?php endif; ?>

Thats the full code on the file and as for the require-config:

var config = {
 map: {
 "*": {
 "atq_slider": "js/owlcarousel/owlslider",
 "modal" : "Magento_Ui/js/modal/modal",
 "atq_menu": "js/menu/atq_menu",
 "atq_ajax_product":"vendor_ProductFilter/js/ajaxload",
 "atqZoom": "Magento_Catalog/js/atqZoom",
 "owlSlider": "js/owlcarousel/owl.carousel.min",
 "owlslider" : "js/owlcarousel/owl.carousel.min",
 "owl_slider": "js/owlcarousel/owl.carousel.min",
 "dropdownDialog": "js/abd-dropdown",
 "fotorama/fotorama": "js/fotorama"
 }
 },
 paths: {
 "owlslider" : "js/owlcarousel/owl.carousel.min", 
 "jquerymousewheel" : "js/jquery.mousewheel", 
 "lodash" : "js/lodash.min",
 "iscroll": "js/iscroll",
 "iscrollprobe": "js/iscroll-probe"
 },
 "shim": {
 "js/owlcarousel/owl.carousel.min": ["jquery"],
 "jquerymousewheel": ["jquery"],
 "iscroll": "js/iscroll",
 "iscrollprobe": "js/iscroll-probe"
 },
 deps: [
 "Magento_Theme/js/example",
 ]
};

• Sukumar Gorai: Can you post the whole code you are using? like code in requirejs-config.js
• happy coder: Thats all the code on the page and the require-config, hope thats helpful for you.
• B00MER: If it is working on local or other lower environments you may be in developer mode but not on production. Be sure to regenerate assets & clear cache. Also check for minification
• Sukumar Gorai: Can you update your shim by this code: shim: { "js/owlcarousel/owl.carousel.min": { deps: ["jquery"] }, "jquerymousewheel": { deps: ["jquery"] }, "iscroll": "js/iscroll", "iscrollprobe": "js/iscroll-probe" },

Answer 1

Thanks for the help turned out it was a real simple fix, just needed to add IScroll within the require function enabling IScroll to be at the global level and therefore allowing iscroll to function properly.

Example below along with the link to the answer here:

define(["jquery","scrolloverflow","fullpage"], function(,ドル IScroll) {
example = new IScroll({
...
});
 });