javascript - 为什么用鼠标滚轮滚动背景会闪烁？

Question

我想创建自己的小解决方案来操纵背景图像位置，但如果我通过鼠标滚轮滚动，则背景图像会“闪烁”。实际上是向上移动，然后校正位置，显示为闪烁。

如何解决这个问题？

这是我的 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 .

Answer 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)