Есть ли альтернативы горизонтальной прокрутке?

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>

Вы можете проверить это здесь также