如何让我的猫头鹰旋转木马方向遵循鼠标滚轮方向

Question

当我滚动鼠标滚轮时它会移动但是当我改变滚动方向时它不会改变它的方向。如何让我的猫头鹰旋转木马方向跟随鼠标滚轮方向？当我滚动鼠标滚轮时它会移动但是当我改变滚动方向时它不会改变它的方向。如何让我的猫头鹰旋转木马方向跟随鼠标滚轮方向？

var owl = $('.owl-carousel');
owl.owlCarousel({
    loop: true,
    margin: 10,
    padding: 10,
    responsiveClass: true,
    rtl: false,
    stagePadding: 100,
    smartSpeed: 550,
    autoplay: true,
    autoplayTimeout: 1000,
    autoplayHoverPause: true,
    nav: true,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: true
        },
        600: {
            items: 3,
            nav: true
        },
        1000: {
            items: 5,
            nav: true,
            
        }
    }
})
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY > 0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

html{
            width: 100vw;
            background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
        }
    .demo-container{
        margin-top: 5em;
        background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
    }
    .owl-carousel .owl-stage-outer{
        overflow: visible;
    }
    .sb-carousel-wrap {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
    position: absolute;
    top: 0;
    width: 105px;
    height: 100%;
    z-index: 10;
}
.brand-carousel-gradient.left {
    left: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img{
	overflow: hidden;
}
.sb-car-img:hover img{
     transform: scale(1.2);
}

.sb-itm-img  {
  	transition: all 0.6s ease-in 0s;
	-webkit-transition:  all 0.6s ease-in 0s;
	-ms-transition:  all 0.6s ease-in 0s;
}
.my-slider{
	float: left:
	width:100%;
	padding: 0 15px;
	overflow: hidden;
}

<div class="my-slider">
<div class="sb-carousel-wrap">
        <div class="brand-carousel-gradient left"></div>
        <div class="brand-carousel-gradient right"></div>
       <div class="demo-container">
         <div class="owl-carousel owl-theme">
    
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
             </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
    
            </div>
    
        </div>
    </div>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

Answer 1

我遇到过同样的问题。

在Chrome开发人员工具（F12）中，使用日志检查wheel事件：

console.log(e);

这将向您显示事件对象中不存在e.deltaY。然而，e.originalEvent属性，e.originalEvent.deltaY存在于此。

因此，将回调更改为：

    ...
    if (e.originalEvent.deltaY > 0) {
    ...

滚动应该现在可以在两个方向上正常工作。

[编辑]我考虑让它在IE（11）中运行。 IE11显示了在Chrome对象中不存在的wheel事件对象属性e.originalEvent.wheelDelta，这可以像deltaY一样使用。

在这种情况下，我们可以使用

    ...
    if (e.originalEvent.wheelDelta> 0) {
    ...

它应该适用于Chrome和IE11。

要在Firefox中使用它，还需要一个不同的回调事件AND属性：

回调是DOMMouseScroll和测试的属性是e.originalEvent.detail，如下：

owl.on('DOMMouseScroll','.owl-stage',function(e){
    if (e.originalEvent.detail > 0){
        owl.trigger('next.owl');
    } 
    else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
}); 

作为旁注，我查看了Owl演示，这确实按照文档中的描述运行，使用e.deltaY。