如何使用javascript中的每個鼠標滾動使頁面按預定高度滾動？

Question

我敢肯定這個問題已經被問過了，但是由於我使用的術語不正確，我找不到它。

每次訪客向下或向上滾動時，我都希望頁面滾動一個預定的數量（100px或下一個DOM的高度）。

Answer 1

 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> 

更新資料

解決方案需要考慮滾動方向。 上面已更新為使用可以使用Window.Onscroll方法來包括滾動方向檢測嗎？

Answer 2

Javascript具有滾動功能：

body.onscroll=function(){yourcode};

這將列出滾動事件。 用您的話來說，單擊鼠標滾輪就是一個事件，因此每次都會觸發。

如果使用此：

document.body.scrollTop += X;

X是您要移動的像素高度，即100px，則每個鼠標滾輪移動將為100px。 您可以根據位置動態更改100px。

正如下面的有用注釋所指出的那樣，現在將禁止向上滾動。 要啟用向上滾動，您需要記住它們的最后滾動位置，以便確定它們是向上還是向下。 將其存儲在變量中：

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;
};

編輯：正如下面的雨果·德爾辛（Hugo Delsing）所建議的那樣，您還可以按照本SO帖子中的說明使用增量： 滾動事件上的單個函數調用？

為了完整起見，以下是其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>");
    }
});

他們使用帶有“通知”類的div來顯示方向。 盡情享受，別忘了將您的加號發送到原始帖子。