javascript - 当鼠标恰好位于范围 slider 上时滚动会更改值

Question

我在我的网站上将下面的代码用于范围 slider ，一切正常，但当鼠标恰好在 slider 上时向上/向下滚动会更改栏的值。这可能会导致意外更改，如果用户只是想滚动，他/她甚至可能不会注意到值正在更改。

此问题仅发生在 Windows 和 Firefox 上(例如，Mac 和 Firefox 的行为不同)。

代码(来自 codepen 的 Sean Stopnik 的信用):

var rangeSlider = function(){
  var slider = $('.range-slider'),
      range = $('.range-slider__range'),
      value = $('.range-slider__value');
    
  slider.each(function(){

    value.each(function(){
      var value = $(this).prev().attr('value');
      $(this).html(value);
    });

    range.on('input', function(){
      $(this).next(value).html(this.value);
    });
  });
};

rangeSlider();

.range-slider {
    width: 100%;
    margin: 13px 0px;
}

.range-slider__range {
    -webkit-appearance: none;
    width: calc(100% - (73px));
    height: 10px;
    border-radius: 5px;
    background: #d7dcdf;
    outline: none;
    padding: 0;
    margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
    background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
    background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #2c3e50;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
    background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
    background: #1abc9c;
}

.range-slider__value {
    display: inline-block;
    position: relative;
    width: 60px;
    color: #fff;
    line-height: 20px;
    text-align: center;
    border-radius: 3px;
    background: #2c3e50;
    padding: 5px 10px;
    margin-left: 8px;
}
.range-slider__value:after {
    position: absolute;
    top: 8px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #2c3e50;
    border-bottom: 7px solid transparent;
    content: '';
}

#info {
    margin: 20px -1px;
    font-size: 21px;
}
#data_value {
    float: right;
    margin-right: 50px;
    font-size: 19px;
}

#CurrentCost, #Target_sidebar, #Target, #CurrentCost_sidebar {
    font-weight: bold;
}

#regiration_form fieldset:not(:first-of-type) {
    display: none;
}

input:invalid {
    box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
    outline: none;
}

.row.radio-scope {
    margin-left: 15px;
}

.step_text {

    margin-left: 10px;
}

.progress-bar {
    background-color: #30424C;
}

.slider_row {
    margin: 25px 0px;
    padding-bottom: 15px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #d7dcdf;
}

.slider {
    margin-top: 10px;
}

.name {
    margin-top: 3px;
}


::-moz-range-track {
    background: #d7dcdf;
    border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
    border: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="range-slider">
  <input class="range-slider__range" type="range" value="100" min="0" max="500">
  <span class="range-slider__value">0</span>
</div>

<div class="range-slider">
  <input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
  <span class="range-slider__value">0</span>
</div>

<div class="range-slider">
  <input class="range-slider__range" type="range" value="400" min="0" max="500">
  <span class="range-slider__value">0</span>
</div>

我试图在 MDN web docs 上找到解决方案，该页面未提及任何有关鼠标滚动的内容，并且在该页面上，当我在鼠标悬停在 slider 上时进行滚动时，页面会滚动并且 slider 值不会像预期的那样发生变化。

有可能解决这个问题吗？

谢谢。

Answer 1

这个呢？

$(".range-slider").bind("mousewheel", function() {
    return false;
});

这应该会阻止这种行为。如果您希望它仍然滚动页面，您可以从那里开始研究冒泡。