Buggy scrollTo design would like to scroll to next div and wait until

Page 1 of 1

2 Replies - 4828 Views - Last Post: 18 January 2014 - 06:29 AM

#1 Jezzabeanz   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 35
  • Joined: 19-September 11

Buggy scrollTo design would like to scroll to next div and wait until

Posted 23 December 2013 - 07:28 AM

I'm working on a one-page website utilising jQuery and scrollTo see here for what I have so far: http://drbr.co.uk/

I would like it to scroll to the next "page" or section of the page when the user uses the scroll wheel. Of course with the code I have (see below) it jumps to the next section but after multiple scrolls (like a standard user would scroll) it jumps through the sections, it seems to need a scroll threshold.

jQuery for ScrollTo:

var current


//Srolls window to the next div element using the scroll wheel.
// Would like to work out a scroll threshold. 
$(function() {          
   $('body').mousewheel(function(event, delta) {
    var $current = $('div.current');

    console.log(delta);
    console.log($current);

    if (delta > 0) {
        $prev = $current.prev();

        if ($prev.length) {
            $('body').scrollTo($prev, 500);
            $current.removeClass('current');
            $prev.addClass('current');
        }
    } else {
        $next = $current.next();

        if ($next.length) {
            $('body').scrollTo($next, 500);
            $current.removeClass('current');
            $next.addClass('current');
        }
    }

    event.preventDefault();
    });
});

The version of scrollTo: http://cdnjs.cloudfl...usewheel.min.js

HTML

<body>
<div id="navWrap">
        <div id="nav">
            <ul>
                <li><a href="#" class="smoothScroll">Demo Link 1</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 2</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 3</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 4</a></li>
            </ul>    
            <br class="clearLeft" />
        </div>
    </div>
    <div class="container current" id="welcome">
        <div class="message">
            <h1>It can be a lonely road. <br/>Let me help you.</h1>
        </div>
    </div>
    <div class="container" id="aboutme"></div>
    <div class="container" id="mywork"></div>

</body>


If you were to use this concept, how would you implement it? I do like the idea but I'm not the best jQuery programmer.

Is This A Good Question/Topic? 0
  • +

Replies To: Buggy scrollTo design would like to scroll to next div and wait until

#2 OrganizedChaos   User is offline

  • D.I.C Head

Reputation: 39
  • View blog
  • Posts: 153
  • Joined: 29-November 08

Re: Buggy scrollTo design would like to scroll to next div and wait until

Posted 12 January 2014 - 06:16 PM

Hi Jezzabeanz,

Here's the corrected code:
var isScrolling = false;

//Scrolls window to the next div element using the scroll wheel.
// Scroll bug fixed! 
$(function() {          
    $('body').mousewheel(function(event, delta) {
		if(!isScrolling){
			isScrolling = true;
			var $current = $('div.current');
			
			//console.log(delta);
			//console.log($current);
					
			if (delta > 0) {
				$prev = $current.prev('.container');
				
				if ($prev.length) {
					$('body').scrollTo($prev, 500);
					$current.removeClass('current');
					$prev.addClass('current');
				}
			} else {
				$next = $current.next('.container');
				
				if ($next.length) {
					$('body').scrollTo($next, 500);
					$current.removeClass('current');
					$next.addClass('current');
				}
			}
				
			
			event.preventDefault();
			setTimeout(function(){
				isScrolling = false;
			}, 500);
		}
    });
});


I added a boolean variable to tell whether or not the window was in the process of scrolling. The scrolling animation will now only occur if the window is not already scrolling.
The timeout time must match the time it takes for the window to scroll to its position.

Also, there was a bug in your .prev() and .next() statements where .current would be added to the parent of the containers, which would stop the scrolling momentarily if you tried to scroll past the top or bottom of the document. So, I just specified only select the previous or next elements if the class was ".container".

Regards,
OC
Was This Post Helpful? 1
  • +
  • -

#3 Jezzabeanz   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 35
  • Joined: 19-September 11

Re: Buggy scrollTo design would like to scroll to next div and wait until

Posted 18 January 2014 - 06:29 AM

Thank you, OC.

It works beautifully +1 rep.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1