为什么用鼠标滚轮滚动时背景会闪烁

Why the background is blinking if scrolled with mouse wheel?

本文关键字：背景 闪烁 滚动 鼠标 为什么      更新时间：2023-09-26

我想创建我自己的小解决方案来操纵背景图像位置，但是如果我通过鼠标滚轮滚动，那么背景图像是"闪烁"的。实际上它是向上移动的，然后校正了位置，它看起来像在闪烁。

我该如何解决这个问题?

下面是我的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对这个问题的回答，并做了一些修改来检测项目是否可见:

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。

这似乎只在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>

哦，我应该提到(据我所知)这是因为ie的"平滑滚动"。如果你把它关掉，它就会像预期的那样工作。(引用http://answers.microsoft.com/en - us/ie/forum/ie11 iewindows8_1/choppy静态-背景-使用-光滑- scroll/8b53a32b db21 - 4 - fa3 a61d - 7732 f3fc217a?auth=1)

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

需要使用jQuery鼠标滚轮插件和simplr-smoothscroll插件的平滑滚动:

<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>
相关文章：