Как сделать вот такой скролл у элемента относительно другого элемента?

Question

[Shugar348]

www.bloomberg.com/europe

Взгляните пожалуйста как устроен там скроллинг контента. Слева миниатюры с новостями, справа основной контент: эти миниатюры и основной контент относительно друг-друга скроллятся с разной скоростью. Как такое провернуть.

Answer 1

[Twist]

Реализовано это с помощью translate3d
habrahabr.ru/post/151300
stackoverflow.com/questions/18529381/what-does-web...
Что бы посмотреть как там что изменяется достаточно найти расчёт изменения translate3d для этого блока на странице

<section class="brief module has-even-number-of-stories" style="transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px);">

Answer 2

[Денис Инешин]

Это называется parallax-scroll. Делается очень просто.
Контент справа прокручивается на нативной прокрутке, а контент в левом столбике находится на отдельном слое, который крутится на JavaScript. Например так: jsfiddle.net/IonDen/m1s8889u

var $win = $(window),
    $content = $(".js-content"),
    $parallax = $content.find(".js-parallax"),
    baseHeight = $content.outerHeight(),
    maxScroll = baseHeight - $win.innerHeight(),
    parallaxHeight = $parallax.outerHeight(),
    parallaxDiff = parallaxHeight - baseHeight,
    scrollTop, scrollPercent, parallaxTop;

$win.on("scroll", function () {
    scrollTop = $win.scrollTop();
    scrollPercent = scrollTop / maxScroll * 100;
    
    parallaxTop = parallaxDiff / 100 * scrollPercent;
    $parallax[0].style.top = -parallaxTop + "px";
});

Comments

[Shugar348]

Спасибо, очень круто!

Answer 3

[Shugar348]

Сделал немного проще

$ ->
  $(document).scroll ->
      $(".news").find(".content")
      .css('transform', "translate3d(0px, #{$(document).scrollTop() / 2}px, 0)")