Results 1 to 3 of 3

Thread: Bind Mouse Wheel Scrollbar

  1. #1
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default Bind Mouse Wheel Scrollbar

    Currently I'm working on a scrollbar function. I am running into the problem of using the mousewheel. It seems that I just cannot come up with the correct calculation to fix the scrollbar on scrolling down. This is currently what I have:
    Code:
    $(window).bind('mousewheel DOMMouseScroll', function(event){
        if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    		var scrollFix = $('#body_wrapper').scrollTop()-settings.gallery.scrollamount;
    		if(scrollFix < 0)
    			scrollFix = 0
    		
    		
            $('#body_wrapper').scrollTop(scrollFix)
            $('#scrollbar').children('div').offset({top:scrollFix})
        }
        else {
    	var scrollFix = parseInt($('#body_wrapper').scrollTop()+settings.gallery.scrollamount);
    		//if(scrollFix+$('#scrollbar').children('div').height() > $('#scrollbar').height())
    		//	scrollFix = $('#scrollbar').height() - $('#scrollbar').children('div').height()
    		l($('#body_wrapper').scrollTop()/(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height())))
            $('#body_wrapper').scrollTop(scrollFix/(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height())))
            $('#scrollbar').children('div').offset({top:scrollFix/(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height()))})
        }
    });
    You may see the live example here: http://thebcelements.com/portfolio/temp2/.
    If you shrink the browser down it will also disappear off the page completely. I can't think why this keeps happening. I am completely pulling my hair out over this.

    (the l() function is just for logging)

    Thanks.
    Last edited by Deadweight; 11-24-2015 at 08:46 PM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,875
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Your 'scrolldown-amount' increases while the user scrolls down using the mousewheel. Have you tried to put var scrollFix outside the binding function first?

  3. #3
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    I changed it actually and now it works. The reason is the calculation, I needed to do:
    Code:
    scrollFix*(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height()))
    and not:
    Code:
    scrollFix/(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height()))
    Thanks
    Last edited by Deadweight; 11-24-2015 at 08:45 PM.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

Similar Threads

  1. Magnetic Scroll Mouse Wheel
    By davelf in forum Looking for such a script or service
    Replies: 4
    Last Post: 10-26-2014, 08:21 AM
  2. Make "FaceScroll Custom scrollbar" scroll horizontal with mouse wheel
    By sdavey in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-17-2013, 04:06 PM
  3. Firefox mouse wheel event
    By d7soft in forum JavaScript
    Replies: 14
    Last Post: 10-13-2011, 07:56 PM
  4. Resolved using the mouse wheel in Opera
    By james438 in forum JavaScript
    Replies: 9
    Last Post: 09-01-2011, 03:21 PM
  5. JavaScript Mouse Wheel coding
    By shachi in forum The lounge
    Replies: 9
    Last Post: 07-26-2006, 06:36 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •