cubiq / iscroll

Smooth scrolling for the web
http://iscrolljs.com
MIT License
12.87k stars 3.81k forks source link

[iScroll 5] Own indicators - one axis #654

Open coxrichuk opened 10 years ago

coxrichuk commented 10 years ago

I want to be able to specify my own indicators and for it to scroll horizontally only.

When I set this on the minimap demo (http://lab.cubiq.org/iscroll5/demos/minimap/), I move around on scrolling area the indicator moves as expected.

However when you move the indicator the scrolling area does not move.

Code example below:

<script type="text/javascript">

var myScroll;

function loaded () {
        myScroll = new IScroll('#wrapper', {
                startX: -359,
                startY: -85,
                scrollY: false,
                scrollX: true,
                freeScroll: true,
                mouseWheel: true,
                indicators: {
                        el: document.getElementById('minimap'),
                        interactive: true
                }
        });
}

//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

</script>
beveraarts commented 10 years ago

I had the same problem. It was working with de default scrollbars so i looked for the creation code of the horizontal indicator.

    // Horizontal scrollbar
            if ( this.options.scrollX ) {
                indicator = {
                    el: createDefaultScrollbar('h', interactive, this.options.scrollbars),
                    interactive: interactive,
                    defaultScrollbars: true,
                    customStyle: 'customStyle',
                    resize: this.options.resizeScrollbars,
                    shrink: this.options.shrinkScrollbars,
                    fade: this.options.fadeScrollbars,
                    listenY: false
                };

                this.wrapper.appendChild(indicator.el);
                indicators.push(indicator);
            }

For me, the listenY option worked.

Soviut commented 10 years ago

I had a similar problem with a vertical indicator where I had to explicitly set:

            indicators:
                el: '#scrollbar'
                interactive: true
                listenY: true
                listenX: false

If I didn't set listenX then the vertical scrollbar didn't work.