how can I make page scroll by pre-fixed height with each mouse scroll in javascript?

Question

I am sure this question has been asked before, but I can't find it probably due to inaccurate terms that I am using.

Each time a visitor scrolls down or up, I want the page to scroll by a pre-fixed amount (100px or the height of next DOM).

possible duplicate of [Can I change the scroll speed using css or jQuery?](http://stackoverflow.com/questions/7408100/can-i-change-the-scroll-speed-using-css-or-jquery) — Alex McMillan, May 24 '15 at 05:00
Please at least *try* and search for an answer before posting a question. This clearly has answers all over the place already. — Alex McMillan, May 24 '15 at 05:01

score -1 · Answer 1 · edited May 23 '17 at 10:26

document.body.onscroll = scrollFunc;

function scrollFunc(e) {
    if ( typeof scrollFunc.x == 'undefined' ) {
        scrollFunc.x=window.pageXOffset;
        scrollFunc.y=window.pageYOffset;
    }
    var diffX=scrollFunc.x-window.pageXOffset;
    var diffY=scrollFunc.y-window.pageYOffset;

    if( diffX<0 ) {
        // Scroll right
    } else if( diffX>0 ) {
        // Scroll left
    } else if( diffY<0 ) {
        document.body.scrollTop += 500;//using 500 to increase effect, you can switch to 100
    } else if( diffY>0 ) {
        document.body.scrollTop -= 500;//using 500 to increase effect, you can switch to 100
    } else {
        // First scroll event
    }
    scrollFunc.x=window.pageXOffset;
    scrollFunc.y=window.pageYOffset;
}

<div id="scroll-pane">
  <table>
    <tr><td>item 0</td></tr>
    <tr><td>item 1</td></tr>
    <tr><td>item 2</td></tr>
    <tr><td>item 3</td></tr>
    <tr><td>item 4</td></tr>
    <tr><td>item 5</td></tr>
    <tr><td>item 6</td></tr>
    <tr><td>item 7</td></tr>
    <tr><td>item 8</td></tr>
    <tr><td>item 9</td></tr>
    <tr><td>item 10</td></tr>
    <tr><td>item 11</td></tr>
    <tr><td>item 12</td></tr>
    <tr><td>item 13</td></tr>
    <tr><td>item 14</td></tr>
    <tr><td>item 15</td></tr>
    <tr><td>item 16</td></tr>
    <tr><td>item 17</td></tr>
    <tr><td>item 18</td></tr>
    <tr><td>item 19</td></tr>
    <tr><td>item 20</td></tr>
    <tr><td>item 21</td></tr>
    <tr><td>item 22</td></tr>
    <tr><td>item 23</td></tr>
    <tr><td>item 24</td></tr>
    <tr><td>item 25</td></tr>
    <tr><td>item 26</td></tr>
    <tr><td>item 27</td></tr>
    <tr><td>item 28</td></tr>
    <tr><td>item 29</td></tr>
    <tr><td>item 30</td></tr>
    <tr><td>item 31</td></tr>
    <tr><td>item 32</td></tr>
    <tr><td>item 33</td></tr>
    <tr><td>item 34</td></tr>
    <tr><td>item 35</td></tr>
    <tr><td>item 36</td></tr>
    <tr><td>item 37</td></tr>
    <tr><td>item 38</td></tr>
    <tr><td>item 39</td></tr>
    <tr><td>item 40</td></tr>
    <tr><td>item 41</td></tr>
    <tr><td>item 42</td></tr>
    <tr><td>item 43</td></tr>
    <tr><td>item 44</td></tr>
    <tr><td>item 45</td></tr>
    <tr><td>item 46</td></tr>
    <tr><td>item 47</td></tr>
    <tr><td>item 48</td></tr>
    <tr><td>item 49</td></tr>
    <tr><td>item 50</td></tr>
    <tr><td>item 51</td></tr>
    <tr><td>item 52</td></tr>
    <tr><td>item 53</td></tr>
    <tr><td>item 54</td></tr>
    <tr><td>item 55</td></tr>
    <tr><td>item 56</td></tr>
    <tr><td>item 57</td></tr>
    <tr><td>item 58</td></tr>
    <tr><td>item 59</td></tr>
    <tr><td>item 60</td></tr>
    <tr><td>item 61</td></tr>
    <tr><td>item 62</td></tr>
    <tr><td>item 63</td></tr>
    <tr><td>item 64</td></tr>
    <tr><td>item 65</td></tr>
    <tr><td>item 66</td></tr>
    <tr><td>item 67</td></tr>
    <tr><td>item 68</td></tr>
    <tr><td>item 69</td></tr>
    <tr><td>item 70</td></tr>
    <tr><td>item 71</td></tr>
    <tr><td>item 72</td></tr>
    <tr><td>item 73</td></tr>
    <tr><td>item 74</td></tr>
    <tr><td>item 75</td></tr>
    <tr><td>item 76</td></tr>
    <tr><td>item 77</td></tr>
    <tr><td>item 78</td></tr>
    <tr><td>item 79</td></tr>
    <tr><td>item 80</td></tr>
    <tr><td>item 81</td></tr>
    <tr><td>item 82</td></tr>
    <tr><td>item 83</td></tr>
    <tr><td>item 84</td></tr>
    <tr><td>item 85</td></tr>
    <tr><td>item 86</td></tr>
    <tr><td>item 87</td></tr>
    <tr><td>item 88</td></tr>
    <tr><td>item 89</td></tr>
    <tr><td>item 90</td></tr>
    <tr><td>item 91</td></tr>
    <tr><td>item 92</td></tr>
    <tr><td>item 93</td></tr>
    <tr><td>item 94</td></tr>
    <tr><td>item 95</td></tr>
    <tr><td>item 96</td></tr>
    <tr><td>item 97</td></tr>
    <tr><td>item 98</td></tr>
    <tr><td>item 99</td></tr>
  </table>
</div>

Update

The solution needs to take into account scroll direction. Updated above to use Can one use Window.Onscroll method to include detection of scroll direction?

You just disabled scrolling up again – Hugo Delsing May 24 '15 at 05:11 — Hugo Delsing, May 24 '15 at 05:11

score -1 · Answer 2 · edited May 23 '17 at 11:43

Javascript has a scroll function:

body.onscroll=function(){yourcode};

This will list for a scroll event. In your terms, one mouse wheel click is an event, therefore this is fired every time.

If you use this:

document.body.scrollTop += X;

Where X is the pixel height you wish to move, i.e. your 100px, then it each mouse wheel movement will be 100px. You can change the 100px dynamically depending on where they are.

As the helpful comment pointed out below, scrolling up will now be disabled. To enable scrolling up, you will need to remember their last scroll position to enable you to determine whether they are going up or down. Store it in a variable:

var last_scroll = 0;
body.onscroll=function(){
   var new_scroll= document.body.scrollTop();
   if (last_scroll < new_scroll){
      // we are going down
      document.body.scrollTop += X;
   }else{
      // we are going up
      document.body.scrollTop -= X;
   }
   last_scroll = new_scroll;
};

EDIT: As suggested by Hugo Delsing below, you can also use the delta as explained in this SO post: Single function call on scroll event?

For completeness, here is the code from their JSfiddle:

//Firefox
$('html').on('DOMMouseScroll', function (e) {
    var delta = e.originalEvent.detail;

    if (delta > 0) {

        //alert('You scrolled up');
        $(".notify").append("<p>You scrolled up</p>");

    } else if (delta < 0) {

        //alert('You scrolled down');
        $(".notify").append("<p>You scrolled down</p>");
    }

});

var flag;
//Everything else
$('html').on('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;

    if (flag != 1 && delta < 0) {
        flag = 1;
        //alert('You scrolled down');
        $(".notify").append("<p>You scrolled down</p>");

    } else if (flag != 2 && delta > 0) {
        flag = 2;
        //alert('You scrolled up');
        $(".notify").append("<p>You scrolled up</p>");
    }
});

They use a div with a class of 'notify' to show the direction. Enjoy and do not forget to send your plus one to the original post.

You should check the `delta` part of the onscroll event to determine up or down scroll — Hugo Delsing, May 25 '15 at 07:02

how can I make page scroll by pre-fixed height with each mouse scroll in javascript?

2 Answers2