3

Добрый день! Есть ли готовое решение чтобы сделать скролл сравнения товаров как на сайте эльдорадо? Вот пример ссылка.

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

1
  • Ни каким скролами не заманишь в эльдородо.
    – Sergey
    25 ноя 2016 в 8:23

2 ответа 2

5

Почти уверен, что можно нашаманить только через css, но проще сделать так:

var scrollSource = document.getElementById("si");
var scrollDest = document.getElementById("sd");

scrollSource.addEventListener('scroll', function () {
  scrollDest.scrollLeft = scrollSource.scrollLeft;
})
#si { overflow: auto; }
#sd { overflow: hidden; }
/* Внимание! Надо обеспечить одинаковую ширину их контента! */
<section id=si>
   12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</section>
<section id=sd>
  <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
  <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
  <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
  <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
  <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
</section>

1
  • Отлично, спасибо!
    – alexsoin
    25 ноя 2016 в 8:45
4

Ну как то так:

$(function() {
  var elem = '.header',
      to_elem = '.contant',
      epos = $(elem).offset().top;
  $(window).scroll(function() {
    if($(window).scrollTop() >= epos){
      $(elem).css({position: 'fixed', top: 0});
    }else{
      $(elem).css({position: 'initial'});
    };
  });
  $(elem).scroll(function() {
    $(to_elem).scrollLeft($(elem).scrollLeft())
  });
});
.main {height: 4000px; padding-top: 50px;}
.header {width:250px; height: 100px; overflow-x: auto; overflow-y: hidden}
.header .list {width: 660px;}
.header .list .item {width: 100px; height: 100px; background-color:red; margin: 0 5px; float: left}
.contant {width:250px; height: 500px; overflow: hidden;}
.contant .list {width: 660px;}
.contant .list .item {width: 100px; height: 500px; background-color:red; margin: 0 5px; float: left}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div class="main">
  <div class="header">
    <div class="list">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
  <div class="contant">
    <div class="list">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

4
  • 1
    там еще влево/вправо можно двигать скролл на фиксированном блоке, а прокручиваться будет основная таблица :)
    – Grundy
    25 ноя 2016 в 8:33
  • Спасибо. Но тут вопрос в другом, как реализовать скроллинг двух объектов одним скролом, по ссылке можно увидеть что это два независимых блока, а скролл у них один
    – alexsoin
    25 ноя 2016 в 8:36
  • Изменил ответ. Смотрите
    – Yuri
    25 ноя 2016 в 9:04
  • Спасибо большое, как раз то что нужно!
    – alexsoin
    25 ноя 2016 в 9:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.