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",
    ]

};

Can you post the whole code you are using? like code in requirejs-config.js — Sukumar Gorai
– Sukumar Gorai, Commented Jul 10, 2018 at 9:41
Thats all the code on the page and the require-config, hope thats helpful for you. — happy coder
– happy coder, Commented Jul 10, 2018 at 9:51
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 — B00MER
– B00MER, Commented Jul 10, 2018 at 10:09
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" }, — Sukumar Gorai
– Sukumar Gorai, Commented Jul 10, 2018 at 10:57

happy coder · Accepted Answer · 2018-07-10 11:37:38Z

0

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({
...
});
    });

answered Jul 10, 2018 at 11:37

happy coder

315 bronze badges

Add a comment |

Stack Exchange Network

IScroll not defined when loading with RequireJS?

1 Answer 1

Your Answer

Hot Network Questions

IScroll not defined when loading with RequireJS?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions