The scrolltop of page is changed when I hide the element

The scrolltop of page is changed when I hide the element - javascript

The scrolltop of page is changed when I move scroll a little and hide element.
(if scrolltop is 0, it doesn't happen). Condition is
property of the element's parents is {position: absolute; bottom:0; right: 0} and I move scroll of page.
Then the scrolltop move to bottom.
Why it happen?
$('button.close').on('click', function(){
$('.layer-content').css({display: 'none'})
});
$('button.show').on('click', function(){
$('.layer-content').show()
});
* {
margin: 0;padding: 0;
}
.parent {
position:relative;
height: 300px;
background: #d0d0d0;
}
.parent .layer {
position: absolute;
bottom: 0;
right: 0;
width: 500px;
background: #c0c0c0;
}
.parent .layer button {
position: absoulte;
top: 0;
right: 0
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<button class="show">show</button>
<div class="layer">
<div class="layer-content">
<button class="close">close</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint dolore necessitatibus cupiditate maiores, optio aut. A nisi possimus voluptate velit, voluptates repellendus dolorum, totam quia fuga neque, provident vel tempore?
</div>
</div>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam, ex reprehenderit voluptatem velit totam, modi quae saepe ipsum tempora, vero labore. Minima voluptatem repudiandae accusantium fugiat veniam recusandae facere beatae.
</div>

Related

Sidebar layout where only the content div is scrollable

I would like to have a sidebar layout like the one in the picture:
The height of the sidebar is 100%; The Menu 1, Menu 2.. header and the div container below (the one with numbers) should also stay visible.
The only appearing scroll should be in the content div and only if the content is long enough.
What i have so far: https://codepen.io/anon/pen/oadQQE
HTML:
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside{
height: 100%;
}
.header {
background: yellow;
font-size: 24px;
overflow: hidden;
}
.header ul {
list-style-type: none;
display: flex;
justify-content: space-between;
}
.header ul li{
border: 1px solid red;
}
.fixed{
border: 1px solid blue;
font-size: 24px;
}
.content{
border: 1px solid red;
height: 100%;
overflow: auto;
}
<div class-"aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>
Edit: leaving this for future reference from W3Schools:
Note: The overflow property only works for block elements with a specified height.

You can do this by setting display: flex on the sidebar itself with a flex-direction: column;.
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background: yellow;
font-size: 24px;
}
.header ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.header ul li {
border: 1px solid red;
}
.fixed {
border: 1px solid blue;
font-size: 24px;
}
.content {
border: 1px solid red;
overflow: auto;
}
<div class="aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>

Prevent page scrolling when scrolling a DIV while resolving [Violation] warning in console

At first this seems to be duplicate question answered here but there is more that need to be figured out.
How can I resolve below given [Violation] warning in google chrome console?
[Violation] Added non-passive event listener to a scroll-blocking
'mousewheel' event. Consider marking event handler as 'passive' to
make the page more responsive.
Here is the code snippet that works but with the above mentioned [Violation] warning.
$.fn.isolatedScroll = function() {
this.on('mousewheel DOMMouseScroll', function (e) {
let delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail,
bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,
topOverflow = this.scrollTop <= 0;
if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
e.preventDefault();
}
});
return this;
};
$('.js-isolated-scroll').isolatedScroll()
// Nothing to check here as it's just repeating <p> tags
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
multiplyNode(document.querySelector('.p-in-fixed'), 20, true);
multiplyNode(document.querySelector('.p-in-body'), 20, true);
body{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: fixed;
border: 1px solid #333;
width: calc(50% - 40px);
background-color: #f8f8f8;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-isolated-scroll fixed">
<p class="p-in-fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.</p>
</div>
<p class="p-in-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.</p>
Here is how I tried to fix it using Modernizr's passiveeventlisteners with this code Modernizr.passiveeventlisteners ? {passive:true} : false while following an answer given here. But I am getting this error message in console:
Unable to preventDefault inside passive event listener invocation.
It's clear for me that I cannot using e.preventDefault() while using {passive:true} and that make sense, I just want know how can I Prevent page scrolling when scrolling a DIV while resolving [Violation] warning in console.
Here is the code snippet that doesn't work and produces above mentioned error in console.
document.getElementById('fixed-content').addEventListener('wheel', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false);
document.getElementById('fixed-content').addEventListener('mousewheel', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false);
document.getElementById('fixed-content').addEventListener('DOMMouseScroll', avoidBodyScroll, Modernizr.passiveeventlisteners ? {passive:true} : false);
function avoidBodyScroll(e) {
let delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail,
bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,
topOverflow = this.scrollTop <= 0;
if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
e.preventDefault();
}
}
// Nothing to check here as it's just repeating <p> tags
function multiplyNode(node, count, deep) {
for (var i = 0, copy; i < count - 1; i++) {
copy = node.cloneNode(deep);
node.parentNode.insertBefore(copy, node);
}
}
multiplyNode(document.querySelector('.p-in-fixed'), 20, true);
multiplyNode(document.querySelector('.p-in-body'), 20, true);
body{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: fixed;
border: 1px solid #333;
width: calc(50% - 40px);
background-color: #f8f8f8;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/*! modernizr 3.5.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-passiveeventlisteners-setclasses !*/
!function(e,n,s){function o(e,n){return typeof e===n}function a(){var e,n,s,a,t,f,l;for(var c in r)if(r.hasOwnProperty(c)){if(e=[],n=r[c],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(s=0;s<n.options.aliases.length;s++)e.push(n.options.aliases[s].toLowerCase());for(a=o(n.fn,"function")?n.fn():n.fn,t=0;t<e.length;t++)f=e[t],l=f.split("."),1===l.length?Modernizr[l[0]]=a:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=a),i.push((a?"":"no-")+l.join("-"))}}function t(e){var n=l.className,s=Modernizr._config.classPrefix||"";if(c&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+s+"no-js(\\s|$)");n=n.replace(o,"$1"+s+"js$2")}Modernizr._config.enableClasses&&(n+=" "+s+e.join(" "+s),c?l.className.baseVal=n:l.className=n)}var i=[],r=[],f={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var s=this;setTimeout(function(){n(s[e])},0)},addTest:function(e,n,s){r.push({name:e,fn:n,options:s})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=f,Modernizr=new Modernizr,Modernizr.addTest("passiveeventlisteners",function(){var n=!1;try{var s=Object.defineProperty({},"passive",{get:function(){n=!0}});e.addEventListener("test",null,s)}catch(o){}return n});var l=n.documentElement,c="svg"===l.nodeName.toLowerCase();a(),t(i),delete f.addTest,delete f.addAsyncTest;for(var u=0;u<Modernizr._q.length;u++)Modernizr._q[u]();e.Modernizr=Modernizr}(window,document);
</script>
<div id="fixed-content" class="js-isolated-scroll fixed">
<p class="p-in-fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.</p>
</div>
<p class="p-in-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates.</p>
Or, Am I making things unnecessarily complicated because as it can be achieved just by using CSS?

Update1:
This is a pure css option for webkit browsers using the ::-webkit-scrollbar property.
body{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: fixed;
border: 1px solid #333;
width: calc(50% - 70px);
background-color: #f8f8f8;
}
.fixed::-webkit-scrollbar {
width: 0px;
background: transparent;
}
<div class="js-isolated-scroll fixed">
<p class="p-in-fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<p class="p-in-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Would something like this work? When you hover over the scrolling div, toggle a class on the body or other parent element that has an overflow of hidden, thus preventing parent scroll using CSS.
$('.js-isolated-scroll').bind('mouseenter mouseleave touchstart touchend',
function() {
$("body").toggleClass("no-scroll");
});
body{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: fixed;
border: 1px solid #333;
width: calc(50% - 40px);
background-color: #f8f8f8;
}
.no-scroll {
overflow: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed-content" class="js-isolated-scroll fixed">
<p class="p-in-fixed">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus aliquam, beatae blanditiis, cum dicta earum eligendi esse eum inventore iusto molestiae necessitatibus nesciunt praesentium quod ratione, similique sit voluptates. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi nisi molestiae expedita tenetur dolore, aliquam, quasi, ducimus neque exercitationem tempore maxime rerum! Alias tempora modi laborum animi voluptate minus quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

Take a look at this fiddle.
The key trick in my answer is separating the two scrolls.
In your example, the body had the scroll so the fixed div had a container with scroll. By making a container element for the p-in-bodies which has the scroll, and placing the fixed-content outside of it, you can get around this.
HTML (added the container wrapper):
<div id="container">
<p class="p-in-body">...</p>
</div>
<div id="fixed-content" class="fixed">
<p class="p-in-fixed">...</p>
</div>
CSS (changed html, body & added #container):
html, body{
padding: 0;
width: 100%;
height: 100%;
}
.fixed {
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
padding: 20px;
overflow: auto;
position: absolute;
border: 1px solid #333;
width: calc(50% - 40px);
background-color: #f8f8f8;
}
#container{
position: relative;
background-color: #ccc !important;
padding: 20px 20px 20px 50%;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow-y: auto;
}

No scroll on hero until content is scrolled

I'm having difficulty creating this effect where the content in the hero is completely scrolled through (100% of the viewport) then the other sections of the page will show. I set it so the background is fixed. The stage div (which should be vertically centered) should come as you are scrolling with bottom padding separating and the second section should not show until fully scrolled. Not entirely sure what I am doing wrong. Code and codepen is below
http://codepen.io/anon/pen/xRPeJj
$(document).ready(function(){
var windowHeight = $(window).height();
$('#stage_1').css({"height": windowHeight + 'px'});
$('#stage_1').bind('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight) {
$('.second-section').css("background-attachment", "scroll");
}
});
});
body, html {
height: 100%;
margin: 0;
}
.container {
padding: 0 1em;
margin: 0 auto;
width: 1000px;
}
.hero {
background-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
background-image: url("http://www.jshiebert.com/wp-content/uploads/2015/12/photo-1424020128429-a60765861de1.jpg");
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
width: 100%;
height: 100vh;
flex-direction: column;
}
#stage_1 {
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero">
<div class="container">
<div id="stage_1">
<div class="hero__text">
<h1>lorem to<span>the Rocks</span></h1>
<h2>Enter for your chance to explore the Rocky Mountains at River Stone Resort & lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam repudiandae nesciunt iusto eveniet! </h2>
</div>
</div>
<div id="stage_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab fuga fugit, repellendus, reprehenderit itaque cum suscipit. Error magni, ipsum eligendi suscipit, rerum vero doloremque culpa, deleniti quae id repellat veniam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus recusandae vel sed at repudiandae ipsam, natus laborum. Sit vitae eos labore, explicabo, blanditiis debitis aut dolor, nesciunt nam ratione temporibus.
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ab, neque autem sequi maxime architecto praesentium aspernatur veritatis corporis voluptas vitae, nemo at mollitia aperiam! Reprehenderit facere esse officiis voluptas. Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Neque molestias hic nihil provident repellat, ad quas doloremque placeat consequuntur voluptatem, repellendus suscipit voluptate aspernatur ea! Voluptatem, est ducimus? Aliquam, voluptates. lorem Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Deleniti consequatur modi excepturi fuga corrupti, tempora, odit accusamus vitae ex, reiciendis maxime porro ipsa quisquam repudiandae, veritatis asperiores fugit. Eveniet, ipsam!Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolore fuga, dignissimos aperiam velit officiis cum voluptate deleniti praesentium at et aliquam natus, consequuntur dolorem repellendus eos mollitia libero esse omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto
maxime, delectus, quis eaque ex quibusdam impedit voluptate, in totam corporis repellat ipsa molestias minima vitae laborum explicabo possimus tempore dolore! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, facere iusto? Suscipit quisquam
excepturi facilis vel reprehenderit inventore perspiciatis autem dolore minima cumque. Dolores suscipit rem, accusantium perferendis vel deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora deserunt esse ab molestiae debitis aliquid
sunt assumenda laborum, laudantium, iste explicabo quae magni vel ipsum quas quos impedit sequi dicta!
</div>

Automatic scroll To element on a list when open this

) ,
I explain my little problem ( sorry for my english):
I have a list of element (div) in left ( constraint in size) with a scrollbar (auto)
(a custom scroll but it's the same problem with the basic scroll).
All of this "element" can be open (with a "+" button) that open a "sub element" IN the list.
Problem , by example if you open the last element you can't see the sub element without scroll to this sub element, i would like add a js for scrolling to this open sub-element"
I explain with image what i would like have: http://www.nanosix.be/test/help.jpg
and i make a simply version on jsfiddle here :
https://jsfiddle.net/9Lrhfqmk/
<body>
<div class="menu">
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
</div>
<script>
$(".button").click(function() {
$(this).parent(".ele").children(".other").toggleClass("displayblock");
});
</script>
</body>

Here is the updated fiddle: https://jsfiddle.net/9Lrhfqmk/2/
You have to do something like this:
$( ".button" ).click(function() {
var parent = $(this).parent(".ele");
var other = parent.children(".other");
other.toggleClass("displayblock");
if(other.hasClass("displayblock")){
$(".menu").scrollTop(other.offset().top);
}
else{
$(".menu").scrollTop(parent.offset().top);
}
});

To add div scroll bar into window scroll bar

In the above link,I want to make the single scroll bar(window scroll bar) without changing the height of the div.container using js and jquery.
HTML:
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
</p>
</div>
<div class="container2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel ullam saepe qui dolorum, repudiandae sed, consequatur pariatur. Accusantium sint, temporibus, nisi quis, perspiciatis voluptate neque ducimus aperiam est fuga atque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsam nam suscipit non tempore, reprehenderit totam ea dicta, incidunt, repudiandae natus cupiditate fugit aperiam eveniet quasi deserunt, nulla itaque quo.</p>
</div>
CSS:
.container {
width:100%;
height:200px;
background-color:#333;
color:#fff;
overflow:auto;
}

We Keep Coding

JavaScript is the programming language of the Web.