CODEWITHSUNDEEP
jqueryscrollmousewheel
NiseNise
NiseNise

Reputation: 1162

jquery vertical scroll with mousewheel

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 {

} });

Upvotes: 2

Views: 15832

Answers (2)

jcubic
jcubic

Reputation: 66470

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

Upvotes: 2

AKnox
AKnox

Reputation: 2635

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))

Upvotes: 1

Related Questions