javascript - 根据显示的页面部分更新 JQuery UI slider

Question

我有一个可用的 JQuery UI slider ，它使用 window.location.hash 导航页面。问题是我也希望它以相反的方式工作，即 slider 根据用户滚动时页面上的 div 进行更新。

var slider = $('#slider');     

    $(function() {
        slider.slider({
            orientation: "vertical",
            min: 1,
            max: 14,
            value: 14,
            change: function(event, ui) {

                window.location.hash = 'eraOne';
                var value = slider.slider('value');

                if(value >= 14) {
                    window.location.hash = 'eraOne';
                }

                else if (value == 13) {
                    window.location.hash = 'eraTwo';
                }

                else if (value == 12) {
                    window.location.hash = 'eraThree';
                }

                else if (value == 11) {
                    window.location.hash = 'eraFour';
                }

                else if (value == 10) {
                    window.location.hash = 'eraFive';
                }

                else if (value == 9) {
                    window.location.hash = 'eraSix';
                }

                else if (value == 8) {
                    window.location.hash = 'eraSeven';
                }

                else if (value == 7) {
                    window.location.hash = 'eraEight';
                }

                else if (value == 6) {
                    window.location.hash = 'eraNine';
                }

                else if (value == 5) {
                    window.location.hash = 'eraTen';
                }

                else if (value == 4) {
                    window.location.hash = 'eraEleven';
                }

                else if (value == 3) {
                    window.location.hash = 'eraTwelve';
                }

                else if (value == 2) {
                    window.location.hash = 'eraThirteen';
                }

                else if (value == 1) {
                    window.location.hash = 'eraFourteen';
                };
                },
              });
            });

Answer 1

首先，我监听了文档滚动事件。在每个此类事件中，我都会循环遍历元素以查看哪个是最后一个不可见元素(如果它们的 position().top 高于文档的scrollTop)。找到那个人后，我进行反转，然后设置 slider 值。

接下来， slider 更改监听器将触发。所以，即使他交给我，我也得听。如果它是手动触发的事件(根据上面的逻辑)，那么我只需返回即可。重要提示:如果您不立即返回，您将陷入触发器的无限循环!

var slider = $('#slider');
$(document).on('scroll', function() {
  var currentScrollTop = $(this).scrollTop();
  var scrollToSpacer = 1;
  $('.spacer').each(function(i, v) {
    var spacer = $(v);
    if(spacer.position().top <= currentScrollTop)
      scrollToSpacer = spacer.text();
  });
  // last value assigned to scrollToSpacer is what we should set the slider value to  
  slider.slider('option', 'value', 14-parseInt(scrollToSpacer));
});
$(function() {
    slider.slider({
        orientation: "vertical",
        min: 1,
        max: 14,
        value: 14,
        change: function(event, ui) {
            if(!event.hasOwnProperty('cancelable')) // triggered programatically
              return;

            window.location.hash = 'eraOne';
            var value = slider.slider('value');

            if(value >= 14) {
                window.location.hash = 'eraOne';
            }

            else if (value == 13) {
                window.location.hash = 'eraTwo';
            }

            else if (value == 12) {
                window.location.hash = 'eraThree';
            }

            else if (value == 11) {
                window.location.hash = 'eraFour';
            }

            else if (value == 10) {
                window.location.hash = 'eraFive';
            }

            else if (value == 9) {
                window.location.hash = 'eraSix';
            }

            else if (value == 8) {
                window.location.hash = 'eraSeven';
            }

            else if (value == 7) {
                window.location.hash = 'eraEight';
            }

            else if (value == 6) {
                window.location.hash = 'eraNine';
            }

            else if (value == 5) {
                window.location.hash = 'eraTen';
            }

            else if (value == 4) {
                window.location.hash = 'eraEleven';
            }

            else if (value == 3) {
                window.location.hash = 'eraTwelve';
            }

            else if (value == 2) {
                window.location.hash = 'eraThirteen';
            }

            else if (value == 1) {
                window.location.hash = 'eraFourteen';
            };
        },
    });
});

#slider {
  position: fixed;
  top: 3em;
  right: 1em;
}
.spacer {
  display: block;
  margin: 3em 0;
  background-color: red;
  font-size: 2em;
  font-weight: bold;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="slider"></div>
<div class="spacer" id="eraOne">1</div>
<div class="spacer" id="eraTwo">2</div>
<div class="spacer" id="eraThree">3</div>
<div class="spacer" id="eraFour">4</div>
<div class="spacer" id="eraFive">5</div>
<div class="spacer" id="eraSix">6</div>
<div class="spacer" id="eraSeven">7</div>
<div class="spacer" id="eraEight">8</div>
<div class="spacer" id="eraNine">9</div>
<div class="spacer" id="eraTen">10</div>
<div class="spacer" id="eraEleven">11</div>
<div class="spacer" id="eraTwelve">12</div>
<div class="spacer" id="eraThirteen">13</div>
<div class="spacer" id="eraFourteen">14</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>