Question

我写了一个小脚本来动画鼠标滚动滚动列表的元素

HTML

<div id="scroll">
    <ul>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/qjmCv5g.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/qjmCv5g.jpg')"></li>
        <li style="background-image: url('http://i.imgur.com/egMFpfq.jpg')"></li>
    </ul>
</div>

的jQuery

$.fn.scroll = function () {
var $this = $(this);
var $list = $(this).find('ul');
var $lis = $list.find('li');
var count = $lis.length;
var direction,
currentSlidePosition;

$this.addClass('scroll');
$list.addClass('slides-list');
$lis.addClass('slide');
$lis.filter(':first').addClass('current');
$lis.filter(':not(:first)').addClass('past');

var scrollHeight = $lis.eq(0).height();

function gotoSlide(direction) {
    currentSlidePosition = $lis.filter('.current').index();

    if ((direction === 1 && currentSlidePosition === 0) || (direction === -1 && currentSlidePosition === count - 1)) {
        return;
    }

    $lis.removeClass('current');
    $lis.eq(currentSlidePosition - direction).removeClass('past prev').addClass('current');
    $lis.filter('.current').prevAll().addClass('prev');
    $lis.filter('.current').nextAll().addClass('past');
    console.log($list.scrollTop())
    $list.animate({
        scrollTop: (direction === -1) ? $list.scrollTop()+scrollHeight : $list.scrollTop()-scrollHeight
    }, {
        duration: 600
    });
}

$this.on('mouseenter', function () {
    var $this = $(this);

    $this.bind('mousewheel', function (e) {
        if ($list.is(':animated')) {

            return;
        }

        if (e.originalEvent.wheelDelta > 0) {
            direction = 1; //up
        } else {                
            direction = -1; //down
        }

        gotoSlide(direction);
    });
});
};

$(document).ready(function () {
    $('#scroll').scroll();
});

http://jsfiddle.net/m5unj2wu/15/

但是在每个滚动背景图像上都会颤抖和抽搐，看起来很难看。有没有办法解决它？

Answer 1

返回false

   $this.bind('mousewheel', function (e) {
        if ($list.is(':animated')) {
            return false;
        }
        ...
        return false;
    });

<强> http://jsfiddle.net/m5unj2wu/21/

jQuery事件处理程序中的

return false实际上与调用e.preventDefault和e.stopPropagation相同。

Answer 2

只需在功能上方添加此代码即可使用

$('#scroll').bind('mousewheel DOMMouseScroll', function() {
    return false
});

这种闪烁正在发生，因为你在滚动事件上在div上注册你的函数，所以当你在元素上滚动鼠标它会做2件事1）调用你的函数2）向下滚动div这是默认的浏览器行为

所以这里我们禁用了浏览器的滚动div

的默认行为

See this fiddle

Answer 3

您的滚动与浏览器自己的滚动竞争，因此您需要告诉它不要尝试滚动自己。您可以在事件处理程序中使用event.preventDefault()来实现此目的：

$this.bind('mousewheel', function (e) {
   e.preventDefault();

请注意，即使较旧的IE版本在这些浏览器上本身不支持preventDefault()，jQuery provides this function for you，因此这是跨浏览器安全的。

http://jsfiddle.net/m5unj2wu/17/

图像在动画上颤抖

3 个答案: