jQuery UI滑块->支持鼠标滚轮吗？

Question

如您所知，我对jQuery还很陌生，所以与此主题无关的代码改进仍然被允许。

这是我的HTML代码:

<div style="display: inline-block; width: 120px;">
    <div>
        Bananas:
        <br />
        <input id="bananas_amount" />
        <input id="bananas_amount_percent" />
    </div>
    <br />
    <div id="bananas" style="height:200px;"></div>
</div>

这是我的可怕的JS代码：

$( "#bananas" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 20,
    step: 5,
    slide: function( event, ui ) {
        $( "#bananas_amount_percent" ).val( ui.value + " %" );

            // the code displays a percentage by standart, but I need the real value, too:
            var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
            var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
            var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
            $( "#bananas_amount" ).val( bananas_amount + " g" );
    }
});
$( "#bananas_amount_percent" ).val( $( "#bananas" ).slider( "value" ) + " %" );

// again the real value (else the value would not be updatet on reload-reset)
var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
$( "#bananas_amount" ).val( bananas_amount + " g" );

（重量为200）

然而，它可以工作，除了一个“小”细节：不能使用鼠标滚轮！我已经发现我需要这个扩展：https://github.com/brandonaaron/jquery-mousewheel/downloads

但是我真的完全不知道如何将其实现到我的滑块中（我在我的网站上有5个滑块）。

请帮忙，谢谢！

- iceteea

---

只是一个想法，使用更短的变量和类名可以使你的代码更易读。 ;) - DarthJDG

变量名本身非常重要，因此它们必须尽可能具有表现力。但是您在这里发布可能仍然是正确的。我可能会编辑它们，谢谢！ - iceteea

当你说“这是我可怕的js代码”时，我认为你一针见血了。 - Gary Green

另一个好的实践是将行宽限制在80或100个字符以内。使用过长的变量名会降低可读性。 - pepkin88

真正的答案是：https://dev59.com/l2ox5IYBdhLWcg3w6on0 - user1382306

Answer 1

鼠标滚轮插件在其角色中太过沉重。我提取了其精华，所有浏览器都能很好地运行。

$('#bananas').bind('mousewheel DOMMouseScroll', function (e) {
    var delta = 0, element = $(this), value, result, oe;
    oe = e.originalEvent; // for jQuery >=1.7
    value = element.slider('value');

    if (oe.wheelDelta) {
        delta = -oe.wheelDelta;
    }
    if (oe.detail) {
        delta = oe.detail * 40;
    }

    value -= delta / 8;
    if (value > 100) {
        value = 100;
    }
    if (value < 0) {
        value = 0;
    }

    result = element.slider('option', 'slide').call(element, e, { value: value });
    if (result !== false) {
        element.slider('value', value);
    }
    return false;
});

编辑：将#slider更改为#bananas

编辑2：添加触发slide事件

因为您只使用value属性作为参数，所以我传递了一个仅包含此属性的参数对象。如果您需要更多内容，请记得将其添加到鼠标滚轮代码中。

编辑3：当slide函数返回false时添加更改取消功能（与文档中一样）

更新：delta不仅显示滚轮方向，还具有更深层次的含义。它描述要滚动的像素数。滚动的默认设置是3行，即120像素，但可能会有所不同。
如果您只想检索滚轮方向，请更改如下：

value -= delta / 8;

转换为：

value -= (delta > 0) ? 5 : (delta < 0) ? -5 : 0;

虽然delta === 0不应该发生。

更新：为jQuery的新版本添加了部分内容（e.originalEvent）。

- pepkin88

---

非常感谢！ 它有效了！我对delta变量（*40 / 8？）有点烦恼，当我滚动时，它会将值增加30，如何将其更改为5？ - iceteea

Answer 2

我之前没有使用过鼠标滚轮插件，但是从我所见到的来看，应该这样使用：

$("#DivName").mousewheel(function(event, delta) {
     //Trigger slide event


      //Prevent the default mouse wheel
      event.preventDefault();

});

DivName可能是您的滑块，我认为Delta是滚动方向（以单位计算），因此我猜测负数是向上，正数是向下。

- Henry

Answer 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var slider = $('[your selector ]');
slider.lightSlider();
slider.on('mousewheel', function(e) {
    if (e.deltaY > 0) {
        slider.goToPrevSlide();
    } else {
        slider.goToNextSlide();
    }
    e.preventDefault();
});
</script>

- Saman Bahrekazemi

---

请确保您在页面中将Jquery.mousewheel.js添加在jquery之后。 https://github.com/jquery/jquery-mousewheel/blob/master/jquery.mousewheel.min.js - Saman Bahrekazemi