如果用鼠标滚轮滚动，为什么背景会闪烁？答案

【问题标题】：Why the background is blinking if scrolled with mouse wheel?如果用鼠标滚轮滚动，为什么背景会闪烁？
【发布时间】：2015-11-11 04:13:52
【问题描述】：

我想创建自己的小解决方案来操纵背景图像的位置，但是如果我通过鼠标滚轮滚动，那么背景图像就会“闪烁”。实际是上移了，再修正位置，就闪现了。

我该如何解决这个问题？

这是我的 HTML 代码：

<section class="parallax">
    <div class="parallax-item">
        any text
    </div>
    <div class="parallax-img-container" id="img1" style="background: url('https://upload.wikimedia.org/wikipedia/commons/3/3e/Example_of_night_photography_at_The_Garden_of_Five_Senses,_New_Delhi.JPG') 0px 0px; background-size: cover; border: 1px solid #000;"></div>
    <div class="parallax-item">
        any other text
    </div>
</section>

这里是 jQuery 代码：

$(function() {
    // set up the items height to the screen height
    var height = $(window).height();
    $('.parallax-item').height(height).css({'background':'#fff'});
    $('.parallax-img-container').height(height);
    // catch scroll event
    $(window).scroll(function() {
         if ( isScrolledIntoView('#img1') ) {
             $('#img1').css({'background-position':'0px '+parseInt( $(window).scrollTop() )+'px'});
         }
    });
});

这是Scott Dowding's 对this 问题的回答，稍作修改以检测项目是否可见：

function isScrolledIntoView(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    //return ((elemBottom > docViewBottom) || (elemTop < docViewTop));
    return (((elemTop <= docViewBottom) && (elemBottom >= docViewBottom)) || ((elemTop < docViewTop) && (elemBottom >= docViewTop) ));
}

因此，如果我在台式计算机中通过滚动条滚动，背景图像的位置就会很好。但是如果我使用鼠标滚轮滚动它就会开始“闪烁”。我该如何解决这个问题？

更新！这里是jsfiddle.net。

【问题讨论】：

请在例如 JSfiddle.net 上设置一个工作示例
@Rvervuurt 如果有一天 jsFiddle 关闭它的服务怎么办？而是建议将相关且最少的代码直接放入问题中，而不是在某些外部网站上。
@RokoC.BuljanL: 那么我们可以使用 codepen 或 jsbin :P
@RokoC.Buljan 好吧，也许“有一天”这个问题无论如何都无关紧要，因为视差应该在昨天而不是今天消失；）考虑“服务可能停止服务的那一天”是没有用的"，因为同样的情况也可能发生在 SO 和任何其他网站上。现在 JSFiddle 可以工作了，所以你可以毫无问题地使用它。
伙计们，我创建了一个 jsfiddle，但工作正常，没有闪烁。

标签： javascript jquery css scroll mousewheel

【解决方案1】：

这似乎只在 Internet Explorer 中，这是我以前遇到过的问题。这段代码帮助了我；

<script>
    $(document).ready(function() {
    /* Internet explorer fixed background jitter fix */
      if(navigator.userAgent.match(/Trident\/7\./)) {
        $('body').on("mousewheel", function () {
          event.preventDefault();

          var wheelDelta = event.wheelDelta;

          var currentScrollPosition = window.pageYOffset;
          window.scrollTo(0, currentScrollPosition - wheelDelta);
      });
      }
     });
  </script>

哦，我应该提到它（据我所知）是因为 Internet Explorer 中的“平滑滚动”。如果您将其关闭，那么它将按预期工作。（参考http://answers.microsoft.com/en-us/ie/forum/ie11-iewindows8_1/choppy-static-background-using-smooth-scroll/8b53a32b-db21-4fa3-a61d-7732f3fc217a?auth=1）

【讨论】：

【解决方案2】：

我找到了答案，感谢Woopaa 的回答，让我开始思考正确的方式。

需要使用jQuery Mouse Wheel Plugin和simplr-smoothscroll plugin的平滑滚动：

<script type="text/javascript" src="js/mousewheel/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/smoothscroll/simplr-smoothscroll.js"></script>
<script type="text/javascript">
$(function() {
    // initialize the smooth scroll plugin
    $.srSmoothscroll();

    // set up the items height to the screen height
    var height = $(window).height();
    $('.parallax-item').height(height).css({'background':'#fff'});
    $('.parallax-img-container').height(height);
    // catch scroll event
    $(window).scroll(function() {
         if ( isScrolledIntoView('#img1') ) {
             $('#img1').css({'background-position':'0px '+parseInt( $(window).scrollTop() )+'px'});
         }
    });
});
</script>

【讨论】：