Создание бесшовного вложенного прокрутки прокрутки

Ответ 1

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

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

• Вы определяете ширину полосы прокрутки, принимая разницу между элементом с и без overflow: scroll. Пусть это будет scrollWidth
• Вы создаете <div> с overflow: auto шириной scrollWidth и position: fixed на месте с правой стороны тела. Пусть свойство scrollTop будет scrollPosition.
• Внутри элемента вы добавляете еще один <div> с шириной 0 (это, по крайней мере, работает в Chrome, проверьте, относятся ли другие браузеры по-другому) и пусть высота будет documentLength.
• Теперь вы можете полностью управлять полосой прокрутки, установив documentLength и scrollPosition любым способом. В вашем случае вы установите documentLength как объединенные значения прокруткиHeight каждого элемента и scrollPosition на основе относительного scrollTop в этих узлах.

В этом jsfiddle можно найти очень базовую демонстрацию концепции (а не реализации) (обратите внимание на width полоса прокрутки привязана к 20px в этом случае и динамический код вообще отсутствует).

Ответ 2

Это решение позволяет прокручивать весь документ, сохраняя возможность прокрутки каждого вложенного div мышью. Надеюсь, я правильно тебя понял.

Это просто концепция, она не предотвращает прокрутку вложенных элементов вместе с окном. Но его можно улучшить.

Array.prototype.slice.call( document.getElementsByClassName('sbRemover') )
.forEach(function (div) {
    var scroll = 0,
        mousedown = false,
        mouseBtnHandler = function (e) {
            mousedown = e.type == 'mousedown';
        }
    
    div.addEventListener('scroll', function (e) {
        // Change of div scrollTop. Negative when scrolling down
        var diff = scroll - e.target.scrollTop;
        // Save new scroll value to be able to compare with it later
        scroll = e.target.scrollTop;
        // Do nothing when div is scrolled by dragging the scrollbar
        if (!mousedown) {
            // Scroll the window to the same amount of pixels the div was scrolled
            window.scrollTo(window.pageXOffset, window.pageYOffset - diff);
        }
    });
    div.addEventListener('mouseup', mouseBtnHandler);
    div.addEventListener('mousedown', mouseBtnHandler);
});

body, div {
    margin: 0;
    padding: 0;
}
.block{
    position: relative;
    width:100vw;
    height:100vh;
    overflow: hidden;
    z-index: 1;
    opacity: 100;
}
.sbRemover{
    width:100%;
    height:100%;
    padding-right:15px;
    overflow: auto;
}
.largeContent{
    height:225vh;
}
.smallContent{
    height:100vh;
}

<div id="simpleCanvas">
  <div class="block" style="background-color: blue">
    <div class="sbRemover">
      <div id="ok" class="largeContent" style="background-image: url('http://silviahartmann.com/background-tile-art/images/grey-repeating-background-8.jpg');"></div>
    </div>
  </div>
  <div class="block" style="background-color: red;">
    <div class="sbRemover">
      <div class="largeContent" style="background-image: url('http://a1star.com/images/star--background-seamless-repeating9.jpg');"></div>
    </div>
  </div>
  <div class="block" style="background-color: green">
    <div class="sbRemover">
      <div class="smallContent"></div>
    </div>
  </div>
  <div class="block" style="background-color: blue">
    <div class="sbRemover">
      <div class="smallContent"></div>
    </div>
  </div>
  <div class="block" style="background-color: red;">
    <div class="sbRemover">
      <div class="largeContent" style="background-image: url('http://people.stfx.ca/x2011/x2011ane/info102/assignment1/11500341-abstract-colorful-repeating-background.jpg');"></div>
    </div>
  </div>
  <div class="block" style="background-color: green">
    <div class="sbRemover">
      <div class="smallContent"></div>
    </div>
  </div>
</div>