Using CSS Overflow on Only One Element

Question

I am having trouble getting overflow-y to work properly on a specific element. In my code, I originally have the body set to overflow-y: hidden. After the button is clicked, though, I want the p tag to become scrollable - just so the user can read all the text. However, I can't seem to get this to work. Here's my code:

$(document).ready(function () {
  $('.btn').on('click', function () {
    $('p').css('overflow-y', 'scroll');
    $(this).addClass('active').css('z-index', '-1');
    $('p').addClass('fadeIn');
    $('.close').addClass('fadeIn').css('cursor', 'pointer');
  });
  $('.close').on('click', function () {
    $('.btn').removeClass('active').css('z-index', '1');
    $('p').css('opacity', '0').removeClass('fadeIn');
    $('.close').css({'opacity': '0', 'cursor': 'default'}).removeClass('fadeIn');
  });
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Barrio', cursive;
}

html, body {
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: hidden;
}

.close {
  position: absolute;
  right: 15px;
  top: 15px;
  height: 45px;
  width: 45px;
  background: #fff;
  border-radius: 50%;
  color: #333;
  text-align: center;
  opacity: 0;
  animation-delay: 1s;
  z-index: 1;
}

.close i {
  line-height: 45px;
  font-size: 1.4em;
}

p {
  color: #fff;
  font-size: 30px;
  position: absolute;
  padding: 60px;
  opacity: 0;
  animation-delay: 0.8s;
}

.btn {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  height: 140px;
  width: 140px;
  background: #333;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  border-radius: 50%;
  border: 9px solid #222;
}
.btn h1 {
  line-height: 130px;
}

.btn.active {
  animation-name: expand;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;  
}

@keyframes expand {
  0% {
    opacity: 0.5;
    color: transparent;
  }
  50% {
    opacity: 1;
    color: transparent;
  }
  100% {
    transform: scale(20);
    border-width: 0;
    border-radius: 50%;
    color: transparent;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="animated close"><i class="fa fa-times"></i></div>
<p class="animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod erat sem, et placerat nunc ultricies vel. Maecenas quam quam, pharetra viverra ultrices a, luctus ut est. Curabitur vulputate, lacus eget aliquet mattis, sapien risus pretium nibh, vel elementum mi nulla nec nisi. In nisl massa, consequat finibus libero feugiat, sodales convallis odio. Vestibulum dignissim tempus sem, nec pellentesque leo. Fusce quam magna, fermentum a nibh et, sollicitudin volutpat nunc. Nullam id faucibus elit. Duis purus diam, viverra scelerisque finibus id, pulvinar tempor sapien. Suspendisse in metus ut quam pharetra consequat. Nunc sit amet enim pellentesque, vulputate est nec, ultricies nisl. Nulla lobortis arcu libero, vel tristique turpis fermentum mollis. Aliquam at molestie lorem.

Donec sollicitudin, orci vitae consequat convallis, nibh diam vehicula diam, pretium scelerisque nisl purus a enim. Fusce mollis dolor eu nibh commodo, in bibendum purus pellentesque. Sed fringilla et tellus tincidunt imperdiet. Fusce sed convallis erat, vel rhoncus tortor. Donec urna sem, posuere eget consectetur eu, tristique quis quam. Morbi imperdiet, felis a posuere pretium, neque ipsum dapibus diam, vitae sodales lectus magna quis tellus. Integer vitae laoreet est, eget lacinia arcu. Cras vestibulum, leo ut faucibus faucibus, dolor ante malesuada justo, sit amet laoreet neque sem non nisi. Fusce nisl neque, tincidunt congue lobortis quis, tristique fermentum nulla. Mauris eleifend pretium ante quis egestas. Ut non sapien tempus, ultrices eros ac, faucibus elit.</p>
<div class="btn"><h1>Click</h1></div>

Answer 1

You have to add a height attribute to the p tag to how the 100% this will trigger the scroll.

$(document).ready(function () {
  $('.btn').on('click', function () {
    $('p').css('overflow-y', 'scroll');
    $(this).addClass('active').css('z-index', '-1');
    $('p').addClass('fadeIn');
    $('.close').addClass('fadeIn').css('cursor', 'pointer');
  });
  $('.close').on('click', function () {
    $('.btn').removeClass('active').css('z-index', '1');
    $('p').css('opacity', '0').removeClass('fadeIn');
    $('.close').css({'opacity': '0', 'cursor': 'default'}).removeClass('fadeIn');
  });
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Barrio', cursive;
}

html, body {
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: hidden;
}

.close {
  position: absolute;
  right: 15px;
  top: 15px;
  height: 45px;
  width: 45px;
  background: #fff;
  border-radius: 50%;
  color: #333;
  text-align: center;
  opacity: 0;
  animation-delay: 1s;
  z-index: 1;
}

.close i {
  line-height: 45px;
  font-size: 1.4em;
}

p {
  color: #fff;
  font-size: 30px;
  position: absolute;
  padding: 60px;
  opacity: 0;
  animation-delay: 0.8s;
  height: 100%;
}

.btn {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  height: 140px;
  width: 140px;
  background: #333;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  border-radius: 50%;
  border: 9px solid #222;
}
.btn h1 {
  line-height: 130px;
}

.btn.active {
  animation-name: expand;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;  
}

@keyframes expand {
  0% {
    opacity: 0.5;
    color: transparent;
  }
  50% {
    opacity: 1;
    color: transparent;
  }
  100% {
    transform: scale(20);
    border-width: 0;
    border-radius: 50%;
    color: transparent;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="animated close"><i class="fa fa-times"></i></div>
<p class="animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod erat sem, et placerat nunc ultricies vel. Maecenas quam quam, pharetra viverra ultrices a, luctus ut est. Curabitur vulputate, lacus eget aliquet mattis, sapien risus pretium nibh, vel elementum mi nulla nec nisi. In nisl massa, consequat finibus libero feugiat, sodales convallis odio. Vestibulum dignissim tempus sem, nec pellentesque leo. Fusce quam magna, fermentum a nibh et, sollicitudin volutpat nunc. Nullam id faucibus elit. Duis purus diam, viverra scelerisque finibus id, pulvinar tempor sapien. Suspendisse in metus ut quam pharetra consequat. Nunc sit amet enim pellentesque, vulputate est nec, ultricies nisl. Nulla lobortis arcu libero, vel tristique turpis fermentum mollis. Aliquam at molestie lorem.

Donec sollicitudin, orci vitae consequat convallis, nibh diam vehicula diam, pretium scelerisque nisl purus a enim. Fusce mollis dolor eu nibh commodo, in bibendum purus pellentesque. Sed fringilla et tellus tincidunt imperdiet. Fusce sed convallis erat, vel rhoncus tortor. Donec urna sem, posuere eget consectetur eu, tristique quis quam. Morbi imperdiet, felis a posuere pretium, neque ipsum dapibus diam, vitae sodales lectus magna quis tellus. Integer vitae laoreet est, eget lacinia arcu. Cras vestibulum, leo ut faucibus faucibus, dolor ante malesuada justo, sit amet laoreet neque sem non nisi. Fusce nisl neque, tincidunt congue lobortis quis, tristique fermentum nulla. Mauris eleifend pretium ante quis egestas. Ut non sapien tempus, ultrices eros ac, faucibus elit.</p>
<div class="btn"><h1>Click</h1></div>

Answer 2

Your p needs a height. Assign it 100% and then the content will overflow beyond that height, triggering a scroll.

$(document).ready(function () {
  $('.btn').on('click', function () {
    $('p').css('overflow-y', 'scroll');
    $(this).addClass('active').css('z-index', '-1');
    $('p').addClass('fadeIn');
    $('.close').addClass('fadeIn').css('cursor', 'pointer');
  });
  $('.close').on('click', function () {
    $('.btn').removeClass('active').css('z-index', '1');
    $('p').css('opacity', '0').removeClass('fadeIn');
    $('.close').css({'opacity': '0', 'cursor': 'default'}).removeClass('fadeIn');
  });
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Barrio', cursive;
}

html, body {
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: hidden;
}

.close {
  position: absolute;
  right: 15px;
  top: 15px;
  height: 45px;
  width: 45px;
  background: #fff;
  border-radius: 50%;
  color: #333;
  text-align: center;
  opacity: 0;
  animation-delay: 1s;
  z-index: 1;
}

.close i {
  line-height: 45px;
  font-size: 1.4em;
}

p {
  color: #fff;
  font-size: 30px;
  position: absolute;
  padding: 60px;
  opacity: 0;
  animation-delay: 0.8s;
  height: 100%;
}

.btn {
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  height: 140px;
  width: 140px;
  background: #333;
  color: #fff;
  letter-spacing: 2px;
  text-align: center;
  border-radius: 50%;
  border: 9px solid #222;
}
.btn h1 {
  line-height: 130px;
}

.btn.active {
  animation-name: expand;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;  
}

@keyframes expand {
  0% {
    opacity: 0.5;
    color: transparent;
  }
  50% {
    opacity: 1;
    color: transparent;
  }
  100% {
    transform: scale(20);
    border-width: 0;
    border-radius: 50%;
    color: transparent;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="animated close"><i class="fa fa-times"></i></div>
<p class="animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod erat sem, et placerat nunc ultricies vel. Maecenas quam quam, pharetra viverra ultrices a, luctus ut est. Curabitur vulputate, lacus eget aliquet mattis, sapien risus pretium nibh, vel elementum mi nulla nec nisi. In nisl massa, consequat finibus libero feugiat, sodales convallis odio. Vestibulum dignissim tempus sem, nec pellentesque leo. Fusce quam magna, fermentum a nibh et, sollicitudin volutpat nunc. Nullam id faucibus elit. Duis purus diam, viverra scelerisque finibus id, pulvinar tempor sapien. Suspendisse in metus ut quam pharetra consequat. Nunc sit amet enim pellentesque, vulputate est nec, ultricies nisl. Nulla lobortis arcu libero, vel tristique turpis fermentum mollis. Aliquam at molestie lorem.

Donec sollicitudin, orci vitae consequat convallis, nibh diam vehicula diam, pretium scelerisque nisl purus a enim. Fusce mollis dolor eu nibh commodo, in bibendum purus pellentesque. Sed fringilla et tellus tincidunt imperdiet. Fusce sed convallis erat, vel rhoncus tortor. Donec urna sem, posuere eget consectetur eu, tristique quis quam. Morbi imperdiet, felis a posuere pretium, neque ipsum dapibus diam, vitae sodales lectus magna quis tellus. Integer vitae laoreet est, eget lacinia arcu. Cras vestibulum, leo ut faucibus faucibus, dolor ante malesuada justo, sit amet laoreet neque sem non nisi. Fusce nisl neque, tincidunt congue lobortis quis, tristique fermentum nulla. Mauris eleifend pretium ante quis egestas. Ut non sapien tempus, ultrices eros ac, faucibus elit.</p>
<div class="btn"><h1>Click</h1></div>