Question

我正在为客户端创建一个布局，其中页脚是图像，并且将在内容保持垂直滚动的同时水平滚动。

现在，我正在使用滚动事件来获取用户滚动多少像素的值，并将“ background-position-x”值转换为该像素数。

我有一个小提琴https://jsfiddle.net/DaveS_92/Ln8dwj2k/12/来展示我的代码示例（我不能使用客户端的实际内容/图像，但是从概念上讲是相同的。）

var scrollValue = 0;
var bg = $('#footer');
var bgCurrentXPosition = parseInt($('#footer').css('background-position-x'), 10);

$(window).scroll(function(event){
    var bgCurrentXPosition = parseInt($('#footer').css('background-position-x'), 10);
    var scrolled = $(document).scrollTop() - scrollValue;
    scrollValue = $(document).scrollTop();
    console.log("The value scrolled was " + scrolled);

    var bgUpdateXPosition = (bgCurrentXPosition - scrolled);
    console.log(bgUpdateXPosition);

    bgCurrentXPosition = $('#footer').css('background-position-x', bgUpdateXPosition);

    $('#footer').css('background-position-x', bgUpdateXPosition);
});

我的问题是，它在移动设备（特别是Android）上的波动性如何。另外，它会剪裁背景图像的末尾，而不是像在桌面上那样重复。所以我的问题是，有没有其他方法可以帮助我进行滚动操作？

Answer 1

您可以使用简单的js $('#footer').css('background-position-x', -$(document).scrollTop());

对其进行修复

我已将所有Section添加到一个Div中，并将页脚放在外面。并将页脚大小的填充添加到主要div中。这样您就可以滚动到结束。

请参见下面的代码段

// var scrollTimeout = false;

$(window).scroll(function(event){
    /* Clear it so the function only triggers when scroll events have stopped firing*/
    // clearTimeout(scrollTimeout);
    /* Set it so it fires after a second, but gets cleared after a new triggered event*/
    $('#footer').css('background-position-x', -$(document).scrollTop());
});

#footer {
    height: 140px;
    background-image: url(https://d3zr9vspdnjxi.cloudfront.net/artistInfo/thomvint/thumb/607.jpg?0);
    background-position-x: 0px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-size: cover;
    background-repeat: repeat-x;
}

.main-container{
  padding-bottom: 140px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
<section>
  <div class="container white-bg">
    <h1>Section 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 5</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 6</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 7</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 8</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 9</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>

<section>
  <div class="container white-bg">
  <h1>Section 10</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p>
  </div>
</section>
</div>
<section id="footer">&nbsp;</section>

您也可以here对其进行测试

水平滚动页脚是否有其他选择？

1 个答案: