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

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) 中，使用日志检查滚轮事件：

console.log(e);

这将告诉您e.deltaY 不存在于事件对象中。但是，e.originalEvent 属性确实存在，并且e.originalEvent.deltaY 存在于此处。

因此，将回调更改为：

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

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

[编辑] 我考虑让它在 IE(11) 中工作。 IE11 显示了 Chrome 对象中不存在的滚轮事件对象属性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。

Answer 2

我有同样的问题。 要解决此问题，只需替换：

if (e.deltaY > 0) {

与：

if (e.originalEvent.deltaY>0){