2

I wrote a little script to animate elements of a list on mousewheel scroll

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/

but on every scroll background images tremble and twitch and it looks ugly. Is there any way to fix it?

hronikata
  • 107
  • 10

3 Answers3

3

return false

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

http://jsfiddle.net/m5unj2wu/21/

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation.

Miguel Mota
  • 20,135
  • 5
  • 45
  • 64
2

Just add this code above your function and it will work

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

This flickering is happening because you are registering your function on div on scroll event, so When you mouse scroll on element it does 2 thing 1) Calls your function 2) Scrolls down div which is default browser behaviour

So here we are disabling the browser's default behavior for scrolling the div

See this fiddle

Parag Bhayani
  • 3,280
  • 2
  • 28
  • 52
2

Your scrolling is competing with the browser's own scrolling, so you need to tell it not to attempt to scroll itself. You can achieve this with event.preventDefault() in your event handler:

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

Note that even though older IE versions don't natively support preventDefault(), jQuery provides this function for you on those browsers, so this is cross-browser safe.

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

CupawnTae
  • 14,192
  • 3
  • 29
  • 60