How to close lightning-combobox menu items when scrolling the page in LWC?

Question

I have a LWC and a lightning-combobox inside it, but while the dropdown items are open and I scroll the page, the menu items are still visible on top of other items. I need to auto-hide the menu items on page scroll. Please help that how this can be achieved. Thanks in advance. HTML CODE

<div class="slds-size_1-of-3 slds-grid slds-gutters combobox-alignment">
            <div class="row slds-grid slds-gutters slds-align_absolute-center">
               <span class="slds-m-left_large slds-truncate slds-cell-wrap content-display">
                  <lightning-combobox name="selectednumberlist" value={selected_number_list} options={selectedOptions}
                     onchange={handleChange} variant="label-hidden" dropdown-alignment="auto" class="combobox-width">
                  </lightning-combobox>
               </span>
            </div>
         </div>

JS CODE

    @track selected_number_list = '10';

    get selectedOptions() {
        return [
            { value: '10', label: '10'},
            { value: '25', label: '25'},
            { value: '50', label: '50'},
            { value: '75', label: '75'},
            { value: '100', label: '100'}
        ];
    }

    handleChange(event) {
        this.selected_number_list = event.detail.value;
    }

The following is the screenshot of the problem being faced

Answer 1

I was also facing same issue with combobox. I gave it below fix. you can provide onwheel event in HTML of your LWc and in its handler put the below code

OnscrollHandler(event) {
   if(window.pageYOffset > 0) {
   //show hide your dropdown by boolean flags
   this.showalloptions = false;
   this.showoptions = false;
   }
}