jquery vertical scroll with mousewheel

Question

I have div containing images that I want to scroll up and down using the jquery mousewheel plugin. Not sure how to do this, the documentation is not very helpful would be grateful for any suggestions.

<div class="innerScroll" style="float:left;width:448px;height:500px; overflow:hidden;">
<div class="mediaPanel"><img src="media/poster_silence.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>
<div class="mediaPanel"><img src="media/poster_comingsoon.jpg" alt="" /></div>

<script type="text/javascript">

$('innerScroll').bind('mousewheel', function(event,delta){ if (delta > 0) {

} else {

} });

Solution 1

if you're using this file jQuery_mousewheel_plugin.js

$('.innerScroll').mousewheel(function(event,delta){

    var media = $(this).find('.mediaPanel');
    if (delta > 0) {
        media.css('top', parseInt(media.css('top'))+40);
    } else {
        media.css('top', parseInt(media.css('top'))-40);
    }        
});

EDIT:

This is old answer but just got visitor to the demo I've uploaded that returned 404, so I've uploaded the code again, it was not working, so I've modified the code a bit, here is working version:

$(document).ready(function(){
    $('.innerScroll').mousewheel(function(event, delta){
        var self = $(this);
        var scrollTop = self.prop('scrollTop');
        if (delta < 0) {
            self.prop('scrollTop', scrollTop + 40);
        } else {
           self.prop('scrollTop', scrollTop - 40);
        }
    });
});

Copy of jQuery mousewheel can be found in one of my open source projects that are on npm and accessible from unpkg:

https://unpkg.com/jquery.terminal/js/jquery.mousewheel-min.js

Demo now works and is located in same place:

https://jcubic.pl/mousewheel.html

Solution 2

I noticed you have the outermost div set to overflow hidden, remove that and add position relative. Then add a div around the whole thing with overflow hidden on that.

Then you can:

if (delta > 0){$(this).css({"top":+=40,"bottom":-=40});}
else{$(this).css({"top":-=40,"bottom":+=40});}

You'll need some logic for stopping it at the top and bottom though. An if statement comparing the height of the wrapper to the container.css(top) or .css(bottom). You have to strip the "px" of the css property too.

.css("bottom").substring(0,$("#image_container").css("bottom").indexOf("px")) <=
(content_initial_height - slider_height))

Comments

[Max Williams]

The first problem i can see is that you have $('innerScroll') which would only pick up innerScroll elements, ie <innerScroll>foo</innerScroll>. You want elements with class innerScroll so it should be $('.innerScroll')

[NiseNise]

thanks, but it didn't actually work for me the page didn't scroll up and down? The parseInt doesn't print the 40px in the div strange????

[jcubic]

I put example here jcubic.pl/mousewheel.html, and in jsbin jsbin.com/asucu3, it works on Opera and Firefox, but doesn't on Chrome, don't know why.