jQuery UI Slider 滚动条中的鼠标滚轮控制答案

【问题标题】：Mouse wheel control in jQuery UI Slider scrollbarjQuery UI Slider 滚动条中的鼠标滚轮控制
【发布时间】：2014-07-23 16:09:38
【问题描述】：

我已经修改了 jQuery UI Slider Scrollbar 以满足我的需要。有原版滑块http://jqueryui.com/slider/#side-scroll 1

我有 html

<div class="ui-slide-range">
    <div id="sliderContent">        
        <div class="viewer ui-corner-all">
            <div class="content-conveyor ui-helper-clearfix">
                <div class="item">
                    <img src="img/item4.jpg" height="152" width="205" alt="">   
                </div>
            </div>
       </div>
       <div id="slider"></div>
    </div>
</div>

还有 jQuery 代码

$(function() {

//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));

//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));

    //config
    var sliderOpts = {
  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
      slide: function(e, ui) { 
        conveyor.css("left", "-" + ui.value + "px");
      }
    };

    //create slider
    $("#slider").slider(sliderOpts);
  });

$( "#slider" ).slider({
            range: "min",
            value: 1,
            slide: function() {
                update();
            }
});

如何为这个滑块添加鼠标滚轮动作？我使用搜索，找到了很多问题，但答案对我没有帮助。以下是一些问题的链接。 Question1 Question2

我已经为此工作了一整天，我无法以任何方式解决问题，请帮助。

JsFiddle 链接是here

【问题讨论】：

我有点反对改变 jQuery 代码。当您想要更新您的 jQuery 版本以修复错误和所有这些时，它确实会妨碍您。无论如何，没有自定义滚动条的滚动 div 并不难，因为滚动可以由 DOM 完成。考虑在不使用 jQuery 插件的情况下执行此操作。
这可能有用javascriptkit.com/javatutors/onmousewheel.shtml
@woverton 就是这样一个插件 mousewheel.js plugins.jquery.com/mousewheel 我想让它工作..

标签： javascript jquery jquery-ui mousewheel jquery-ui-slider

【解决方案1】：

DEMO 带有鼠标滚轮支持的 jquery ui 滑块使用 jquery mousewheel plugin

代码：

$(function() {
    var value;
    $( "#slider" ).slider({
        slide: function( event, ui ) {
            value = $( "#slider" ).slider( "value" );
            $('#slider_val').html(value);
        }
    });

    value = $( "#slider" ).slider( "value" );
    $('#slider_val').html(value);

    $('#slider').on('mousewheel', function(event) {
        event.preventDefault();
        value = $( "#slider" ).slider( "value" );

        //console.log(event.deltaX, event.deltaY, event.deltaFactor);

        //Mousewheel Scrolled up
        if(event.deltaY == -1){
            //alert("scrolled down");
            value = value+1;
            $( "#slider" ).slider("value", value);
            $('#slider_val').html(value);
        }
        //Mousewheel Scrolled down
        else if(event.deltaY == 1){
            //alert("scrolled up");
            value = value-1;
            $( "#slider" ).slider( "value", value );
            $('#slider_val').html(value);
        }
    });

});

【讨论】：

您在哪个浏览器上查看？
在 Firefox 中测试！它在那里工作！我没有 chrome lastes 版本，所以没有测试过！
不能在 chrome 上工作的原因是由于某些错误，在小提琴中未包含鼠标滚轮插件文件，因此在您本地，您必须从实时链接下载该文件到您的本地和相应地包含它，然后它将起作用！试试看，如果您有任何问题，请告诉我！
我在您的代码中发现了问题。它是脚本的链接）查看更新jsfiddle.net/knY4N/1。谢谢！
这就是我在之前的评论中想说的！如果正确包含插件脚本，则代码效果很好！请考虑接受答案！

【解决方案2】：

（这篇文章的工作版本）

您忘记了“移动”内容（slider 中具有“滚动内容”类的 div）
已更改（向下滚动 = 查看新照片）

内容和滑块的固定值

setTimeout( sizeScrollbar, 10 );//safari wants a timeout

$( ".scroll-pane" ).mousewheel(function (event, delta, deltaX, deltaY) {    
    event.preventDefault();

    var 
        value = scrollbar.slider( "option", "value" ),  // Get position of slider (% of 100%)
        value2 = scrollbar.slider( "option", "value" ), // Get position of slider (% of 100%)

        scrollSpeed = 75,
        widthFull = 2000;   // variable (for help: getimagesize, widthNow += ImgWidth, widthFull += widthNow)
        scrollLimit = (-1) * widthFull + innerWidth;    // innerWidth - browser's width


    value = (-1) * (value / 100) * widthFull  + delta * scrollSpeed;
    value > 0 && (value = 0);                           // 'left' limit
    value < scrollLimit && (value = scrollLimit);       // 'right' limit

    $(".scroll-content").css('margin-left', value );    // Setter for content


    value2 += -1 * delta * ( 100 / (widthFull / scrollSpeed) ); //100% / (count of times want to scroll)
    value2 < 0 && (value2 = 0);
    value2 > 100 && (value2 = 100);

    scrollbar.slider( "option", "value", value2 );   // Setter for slider
});

【讨论】：

【解决方案3】：

我找到了解决这个问题的方法，可能对某人有用。

setTimeout( sizeScrollbar, 10 );//safari wants a timeout
$( ".scroll-pane" ).mousewheel(function (event, delta, deltaX, deltaY) {event.preventDefault();
   var value = scrollbar.slider( "option", "value" );
   value -= delta;
   value > 100 && (value = 100);
   value < 0 && (value = 0);
scrollbar.slider( "option", "value", value );
        });

 });

只需将包装块添加到我的代码中。谢谢大家。

JsFiddle link

【讨论】：