Mouse Wheel Scroll not Working inside Select2 WooCommerce Drop Downs

enter image description here

Kind of an annoying issue.

In my WooCommerce Checkout Page, my mouse scroll wheel is not working inside the select boxes. Meaning, if I have my mouse in the drop-down box trying to select a Country..

and use the scrollwheel on my mouse to try to scroll within the dropdown box, the scroll wheel is targeted towards the parent (main) scrollbar and not the dropdown box.

Here’s the html:

<div class="woocommerce-billing-fields">

<h3>Billing details</h3>

<div class="woocommerce-billing-fields__field-wrapper">
    <p class="form-row form-row-wide address-field update_totals_on_change validate-required woocommerce-validated" id="billing_country_field" data-priority="40">
        <label for="billing_country" class="">Country <abbr class="required" title="required">*</abbr>
        <select name="billing_country" id="billing_country" class="country_to_state country_select select2-hidden-accessible" autocomplete="country" tabindex="-1" aria-hidden="true">
            <option value="">Select a country…</option>
            <option value="UG">Uganda</option>
            <option value="UA">Ukraine</option>
            <option value="AE">United Arab Emirates</option>
            <option value="GB">United Kingdom (UK)</option>
            <option value="US" selected="selected">United States (US)</option>
            <option value="UM">United States (US) Minor Outlying Islands</option>
            <option value="VI">United States (US) Virgin Islands</option>
            <option value="UY">Uruguay</option>
            <option value="UZ">Uzbekistan</option>
        </select><span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-billing_country-container"><span class="select2-selection__rendered" id="select2-billing_country-container" title="United States (US)">United States (US)</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span>
        </span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
        <noscript>&lt;input type="submit" name="woocommerce_checkout_update_totals" value="Update country" /&gt;</noscript>


(I minified this by removing most of the countries, the format is still the same)

I’ve tried using the jQuery plugin scrollLock but I’m having issue with it just not working at all, or I’m not targeting the proper element for it to work.

Anyone have any idea on how I can get the scroll to stay within the drop-down select boxes with this?

Read more here: Mouse Wheel Scroll not Working inside Select2 WooCommerce Drop Downs

Leave a Reply

Your email address will not be published. Required fields are marked *