Horizontal scroll doesn't work on Firefox

[wangyang2012]

Hi, my horizontal scroll works fine on Chrome and Safari browser but it doesn't work on Firefox - it shows automatically the horizontal scrollbar on Firefox but which is hidden on Chrome.

The code is copied from Plunker: https://plnkr.co/edit/wLVudY?p=preview&open=app.component.ts

html file:

<button (click)="scrollTo('#h14', '#h-test', true)">scroll 14</button>
<button (click)="scrollTo('#h1', '#h-test', true)">scroll 1</button>

<ul id="h-test" class="test nav" style="width: 500px"
    [horizontal]="true"
    ngui-scrollable (elementVisible)="id = $event.id" dnd-sortable-container [sortableData]="items" (dragend)="onDraggend()">
    <li id="h1" style="width: 100px; margin: 20px; background-color:lightblue;">
        aa
    </li>
    <li id="h2" style="width: 100px; margin: 20px; background-color:lightblue;">
        bb
    </li>
    <li id="h3" style="width: 100px; margin: 20px; background-color:lightblue;">
        cc
    </li>
    <li id="h4" style="width: 100px; margin: 20px; background-color:lightblue;">
        dd
    </li>
    <li id="h5" style="width: 100px; margin: 20px; background-color:lightblue;">
        ee
    </li>
    <li id="h6" style="width: 100px; margin: 20px; background-color:lightblue;">
        ff
    </li>
    <li id="h7" style="width: 100px; margin: 20px; background-color:lightblue;">
        gg
    </li>
    <li id="h8" style="width: 100px; margin: 20px; background-color:lightblue;">
        hh
    </li>
    <li id="h9" style="width: 100px; margin: 20px; background-color:lightblue;">
        ii
    </li>
    <li id="h10" style="width: 100px; margin: 20px; background-color:lightblue;">
        jj
    </li>
    <li id="h11" style="width: 100px; margin: 20px; background-color:lightblue;">
        aa
    </li>
    <li id="h12" style="width: 100px; margin: 20px; background-color:lightblue;">
        bb
    </li>
    <li id="h13" style="width: 100px; margin: 20px; background-color:lightblue;">
        cc
    </li>
    <li id="h14" style="width: 100px; margin: 20px; background-color:lightblue;">
        dd
    </li>
    <li id="h15" style="width: 100px; margin: 20px; background-color:lightblue;">
        ee
    </li>
    <li id="h16" style="width: 100px; margin: 20px; background-color:lightblue;">
        ff
    </li>
    <li id="h17" style="width: 100px; margin: 20px; background-color:lightblue;">
        gg
    </li>
    <li id="h18" style="width: 100px; margin: 20px; background-color:lightblue;">
        hh
    </li>
    <li id="h19" style="width: 100px; margin: 20px; background-color:lightblue;">
        ii
    </li>
    <li id="h20" style="width: 100px; margin: 20px; background-color:lightblue;">
        jj
    </li>
</ul>

css file:

.test {
    /* Styles go here */
    * { box-sizing: border-box};
    legend {background-color: #fff};
    ul {list-style: none}
    ul li {display: inline-block; border: 1px solid #999; padding: 10px; cursor: pointer;}
    ul li.current { background: #333; color: #fff}
    .scrollable { height: 200px; border: 1px solid #999; position: relative;}
    .scrollable > div {height: 110px}
    .scrollable > div:nth-child(odd) { background-color: #ccc}

    ul.window {position: fixed; top: 0; left: 0; background: yellow; z-index: 1;}
    ul.window li {display: block; }
    .scrollable.section {overflow:auto;}

    .horizontal {
        height: 100px;
        width: 100%;
        max-width: 450px;
        white-space: nowrap;
        overflow-y: hidden !important;
    }
    .horizontal > div {
        border: 1px solid #666;
        width: 200px;
        height: 80px;
        display: inline-block;
        text-align: center;
    }

    fieldset {background: #f0f0f0;}
    legend {background: #fff; padding: 0 10px;}
}

ts component file:

scrollTo(selector: string, parentSelector: string, horizontal: boolean) {
        NguiScrollableDirective.scrollTo(
            selector,       // scroll to this
            parentSelector, // scroll within (null if window scrolling)
            horizontal     // is it horizontal scrolling
        );
    }

Tks a lot!

[wangyang2012]

Hi, I found the problem by looking the source code: at the line 101 of the file /src/scrollable/scrollable.directive.ts:

let scrollContainerEl = parentElStyle.overflow === 'auto' ?
      parentEl : document.body;

When we don't set the overflow value, Chrome adds automatically 'auto' to the list but Firefox lets empty, so that the scrollContainerEl is 'parentEl' in Chrome but 'document.body' in Firefox.

I don't think overflow ==='auto' is useful because it works without, I suggest change this line on:

let scrollContainerEl;
if (horizontal) {
    scrollContainerEl = parentEl;
} else {
    scrollContainerEl = parentElStyle.overflow === 'auto' ? parentEl : document.body;
}

or

let scrollContainerEl = parentEl;
if (!horizontal) {
    scrollContainerEl = parentElStyle.overflow === 'auto' ? parentEl : document.body;
}

[allenhwkim]

Accepting PR., can't make time for this thesedays.

[allenhwkim]

This has been fixed..