Как отключить прокрутку во внешних элементах?

У меня есть div с вертикальной прокруткой внутри страницы, который также прокручивается вертикально.

Когда дочерний div прокручивается колесиком мыши и достигает верха или низа полосы прокрутки, страница (тело) начинает прокручиваться. Пока мышь находится над дочерним div, я бы хотел, чтобы прокрутка страницы (тела) была заблокирована.

Это сообщение SO (прокрутите вниз до выбранного ответа) хорошо демонстрирует проблему.

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

Я подумал, что может быть решение, использующее event.stopPropagation (), но ничего не смог заставить работать. В ActionScript такие проблемы можно решить, поместив обработчик колеса мыши в дочерний div, который вызывает stopPropagation () для события, прежде чем оно достигнет элемента body. Поскольку JS и AS являются языками ECMAScript, я подумал, что концепция может быть переведена, но, похоже, это не сработало.

Есть ли решение, которое предотвращает смещение содержимого моей страницы? Скорее всего, используете stopPropagation, а не исправление CSS? Приветствуются ответы JQuery, как и чистый JS.