extra rows w/ height=0

[tommck]

Whenever I use ui-scroll, it adds an extra item at the top and bottom with style="height: 0" on it

I have this code:

    <div ui-scroll-viewport style="height: 20vh; border: solid 1px">
        <ul>
            <li ui-scroll="item in vm.items">{{item}}</li>
        </ul>
    </div>

I wind up with this rendered:

<div ui-scroll-viewport="" style="height: 20vh; border: 1px solid; overflow-anchor: none; overflow-y: auto; display: block;">
    <ul>
        <li style="height: 0px;"></li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">0</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">1</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">2</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">3</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">4</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">5</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">6</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">7</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">8</li>
        <li ui-scroll="item in vm.items" class="ng-binding ng-scope">9</li>
        <!-- uiScroll: item in vm.items -->
        <li style="height: 0px;"></li>
    </ul>
</div>

In this instance, the first and last LIs are rendered because of CSS rules that do "before" to create bullet points.
The same thing happens with table rows, creating an empty space.

Why does this need these extra items? Can we get rid of this?

[tommck]

Ah.. I just realized that these are needed for the scrollbar hacking.

[dhilt]

@tommck 👍