Doesn't work mouse wheel event when scrolling is at the beginning and end.

[raravel]

When mounted component, or move scroll track to start or end. Wheel event dosen't work as the scroll thumb dimming.

At this time, somewhere click in trackbar it works.

Item Data Interface:

{
    nsz: string;
    idx: number;
}

There are about 2400 data. And I use coreui 3.0

Code:

<CSidebarNav>
<virtual-list style="height: 100%; overflow-y: auto; overflow-x: hidden;"
        :data-key="'nsz'"
        :data-sources="NszList"
        :data-component="itemComponent"/>
</CSidebarNav>

itemComponent:

<template>
	<CSidebarNavItem
		class="nsz-item"
		:class="selectedNsz === source.nsz ? 'active' : ''">
		<CRow style="padding: 0.6rem 0.5rem;" @click.stop="selectNszItem(source.idx, source.nsz)">
			<CCol sm="12">
				<CIcon name="cil-file" size="xl"/>
				<span style="margin-left: 0.5rem;">
					{{ cutFileName(source.nsz) }}
				</span>
			</CCol>
		</CRow>
	</CSidebarNavItem>
</template>
<script lang="ts">
import GlobalMixins from '@/plugins/mixins';
import { Component, Mixins, Prop } from 'vue-property-decorator';

@Component({
	computed: {	
		selectedNsz(): string {
			return this.$store.state.selectedNsz;
		},
	},
})
export default class TheItem extends Mixins(GlobalMixins) {
	
	@Prop() private index!: number;
	@Prop() private source!: any;

	public mounted() {

	}

	public selectNszItem(idx: number, nsz: string) {
		this.$store.commit('nsz', nsz);
		console.log(idx, nsz);
	}

	public cutFileName(f: string) {
		f = f.replace(/\.nsz$/, '');
		if ( f.length > 20 ) {
			return f.substr(0, 20) + ' ...';
		}
		return f;
	}

}
</script>

Thanks