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

Я создаю макет для клиента, в котором нижний колонтитул представляет собой изображение и будет прокручиваться по горизонтали, в то время как содержимое остается прокрученным по вертикали.

Прямо сейчас я использую событие прокрутки, чтобы получить значение количества пикселей, прокрученных пользователем, и перевод значения «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.info("The value scrolled was " + scrolled);

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

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

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

Моя проблема в том, насколько он нестабилен на мобильных устройствах, особенно на Android. Кроме того, он обрезает конец фонового изображения вместо того, чтобы повторяться, как на рабочем столе. Итак, мой вопрос: есть ли альтернативный способ сделать это, чтобы помочь с прокруткой?

Вы пробовали debounce-задействовать событие scroll()?

— 11.01.2019 17:18

javascript jquery html css

11.01.2019 17:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 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>

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

11.01.2019 18:04