When scrolling down increment from 1 to 100

When scrolling down increment from 1 to 100 - javascript

So I when I start scrolling into my div, my initial value is 0. When I reach the bottom of the div, I want my value to be 100.
Here's an example :
var initial = 0;
var end = 100;
$('div').scroll(function() {
initial++;
console.log(initial);
});
div {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: scroll;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus exercitationem numquam assumenda alias blanditiis, neque labore eaque veritatis dignissimos, odio atque praesentium ut, itaque! Neque sed voluptas, similique ullam omnis.lorem Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Soluta eos quas ea quia fuga aperiam maxime amet, a odit adipisci earum autem necessitatibus. Quidem obcaecati eveniet maxime ducimus provident saepe. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ipsum deserunt, ipsam explicabo voluptate laborum nam odio nemo neque, libero iusto officia consequuntur dolorem quis est quod eaque? Similique, porro, et!</div>
In this example, if you check the console, When I scroll, the last value is 5, I want it to be 100
Thanks for your help !

You can set initial to be the percentage of the scrollable height
var $test = $('.test');
var scrollableHeight = $test.height() - $test[0].scrollHeight; // get amount of scroll available
$test.scroll(function() {
var $this = $(this);
var initial = $this.scrollTop() / scrollableHeight * -100; // divide the scroll top by the amount of scrollable height to get the percentage then times by -100 to make it a positive number out of 100
console.log(parseInt(initial)); // parseInt is optional - just gives you integers
});
.test {
width: 200px;
height: 300px;
border: 1px solid;
overflow-y: scroll;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus exercitationem numquam assumenda alias blanditiis, neque labore eaque veritatis dignissimos, odio atque praesentium ut, itaque! Neque sed voluptas, similique ullam omnis.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta eos quas ea quia fuga aperiam maxime amet, a odit adipisci earum autem necessitatibus. Quidem obcaecati eveniet maxime ducimus provident saepe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum deserunt, ipsam explicabo voluptate laborum nam odio nemo neque, libero iusto officia consequuntur dolorem quis est quod eaque? Similique, porro, et!</div>

Related

Background resizing on scrolling in mobile browser

I'm trying to create a background for my site and it works beautifully on desktop
but the background starts to resize when I scroll in my mobile browser (chrome) mainly because of the browser search bar hiding and reappearing upon scroll.
Is there any way I can prevent my background from resizing?
here's a video of what happens on my mobile: https://streamable.com/0fplj6
here's the code:
html {
height: 100vh;
margin: 0;
width: 100%;
}
body {
margin: 0;
height: 100%;
;
width: 100%;
background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#header {
width: 100%;
height: 50px;
background-color: black;
}
#header img {
height: 6rem;
margin: 1rem;
}
#content {
width: 70%;
margin: auto;
background: yellow;
overflow: hidden;
}
<body>
<div id="header"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
</div>
</body>
I found a question which was similar
https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome
but it was 6 years old and none of the solutions were working (in pure css)
so is there any solution preferably with pure css? (use vanilla javascript if absolutely necessary)

The main culprit is the background-position:fixed as it was meant to size up to the browser screen (minus the address bar area)
The trick is in using a sticky background.
I tested the below code and it should not resize on scrolling down in the mobile browser
html,
body {
margin: 0;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 50px;
width: 100%;
background: black;
}
#rest {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background: blue;
}
#content {
width: 50%;
z-index: 0;
grid-row: 1;
grid-column: 1;
margin: 0 auto;
background: yellow;
}
#sticky_back {
width: 100%;
height: 100vh;
grid-row: 1;
grid-column: 1;
position: sticky;
top: 0;
background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
</div>
</div>
</body>

Make absolutely positioned button same width as its content

I have floating buttons that I want to be exactly as wide as their content. The content may be several lines long.
I have tried a lot of things, but nothing seems to work. Any ideas how to achieve this?
$('button').css('width', $('button span').outerWidth() + 'px')
$.each($('button'), (i, v) => {
$(v).css('width', $(v).find('span').outerWidth() + 'px');
$(v).css('top', i*100 + 'px');
});
section {
position: relative;
width: 300px;
}
button {
position: absolute;
padding: 0;
text-align: left;
}
span { background: lightcoral; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis iure nostrum dicta cumque. Nisi facilis corporis hic, pariatur molestiae error distinctio architecto quas itaque deserunt aliquam quo molestias dolor ex!</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet.</span>
</button>
<button>
<span>Lorem.</span>
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
</section>

you need to consider the border so add box-sizing: content-box; and also 1px to the final width (I am finding why ...)
$.each($('button'), (i, v) => {
$(v).css('width', ($(v).find('span').outerWidth() + 1) + 'px');
$(v).css('top', i * 100 + 'px');
});
section {
position: relative;
width: 300px;
}
button {
position: absolute;
box-sizing: content-box;
padding: 0;
text-align: left;
}
span {
background: lightcoral;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis iure nostrum dicta cumque. Nisi facilis corporis hic, pariatur molestiae error distinctio architecto quas itaque deserunt aliquam quo molestias dolor ex!</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet.</span>
</button>
<button>
<span>Lorem.</span>
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
</section>

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>

Remove blank when slideToggle

I'm working on a website and I've the following code :
//SlideToggle
$('a').attr('href', 'javascript:void(0)');
$('a').click(function() {
$(this).next().slideToggle();
});
$('.container div').addClass('cf');
.hidden {
display: none;
}
.container {
width: 100%;
margin: 0 auto;
}
.container div {
width: 25%;
display: inline-block;
vertical-align: top;
text-align: center;
background: lightblue;
margin: 0 0 0.25em;
padding: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ipsam, dolorem illum. Amet officiis dignissimos eligendi excepturi nam, aliquid architecto atque nostrum illo. Ratione nesciunt, id nulla dolores? Blanditiis, praesentium.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sint nihil labore molestias expedita corrupti ipsa iusto iure sit nisi ab nobis maxime unde voluptates magni, distinctio quae. Deserunt, incidunt.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt accusamus facilis tempore repellat eligendi accusantium laudantium quis, magni a soluta deleniti voluptatibus quam, est aliquid. Atque a, esse. Itaque, consequuntur.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quo, possimus. Quam odit laudantium, ex alias, repellat laborum quae nobis expedita aperiam iusto iure at facilis obcaecati doloribus quis earum.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ratione doloribus laborum deleniti quae cumque quasi, repellat, ex nemo nulla corporis voluptatum vel doloremque nesciunt cupiditate, veritatis excepturi vero harum.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cupiditate quisquam, dicta eligendi ut eos culpa nisi quod nesciunt vero soluta voluptates illo esse voluptatibus, ab, sint impedit repudiandae dolorum!</p>
</div>
</div>
The slideToggle is working well . However, when I slideToggle, I want this action only affect the div at the bottom and not the others. Let me show you what I want :
(I don't want to touch at div height, they have to stay like that)
Hope I'm clear. Thanks for your help !

This comes close, maybe someone is able to improve this..
//SlideToggle
$('a').attr('href','javascript:void(0)');
$('a').click(function() {
var $self = $(this);
var index = $self.parent().index();
$(this).next().slideToggle(100, function() {
var margin = $self.parent().toggleClass("active").find("p").outerHeight();
if($self.parent().hasClass("active")) {
$(".container div").eq(index + 3).css("margin-top", margin);
}
else {
$(".container div").eq(index + 3).css("margin-top", 0);
}
});
});
$('.container div').addClass('cf');
* {
box-sizing:border-box;
}
.hidden {
display: none;
}
.container {
width: 100%;
margin: 0 auto;
}
.container div {
width: 33.3333333333%;
display: inline-block;
vertical-align: top;
text-align: center;
background: lightblue;
margin:0;
padding: 25px;
position:relative;
-webkit-transition: ease-in-out, margin .1s ease-in-out;
transition: ease-in-out, margin .1s ease-in-out;
float:left;
}
.container div p {
position:absolute;
width:100%;
left:0;
padding:25px;
margin:0;
top:100%;
background: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ipsam, dolorem illum. Amet officiis dignissimos eligendi excepturi nam, aliquid architecto atque nostrum illo. Ratione nesciunt, id nulla dolores? Blanditiis, praesentium.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sint nihil labore molestias expedita corrupti ipsa iusto iure sit nisi ab nobis maxime unde voluptates magni, distinctio quae. Deserunt, incidunt.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt accusamus facilis tempore repellat eligendi accusantium laudantium quis, magni a soluta deleniti voluptatibus quam, est aliquid. Atque a, esse. Itaque, consequuntur.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quo, possimus. Quam odit laudantium, ex alias, repellat laborum quae nobis expedita aperiam iusto iure at facilis obcaecati doloribus quis earum.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam ratione doloribus laborum deleniti quae cumque quasi, repellat, ex nemo nulla corporis voluptatum vel doloremque nesciunt cupiditate, veritatis excepturi vero harum.</p>
</div>
<div>See more
<p class="hidden">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cupiditate quisquam, dicta eligendi ut eos culpa nisi quod nesciunt vero soluta voluptates illo esse voluptatibus, ab, sint impedit repudiandae dolorum!</p>
</div>
</div>

Try this :
Hide all the p tag before do Slide toggle.
$('a').click(function() {
$('p').hide();
$(this).next().slideToggle();
});

We Keep Coding

JavaScript is the programming language of the Web.