Question

我无法让overflow-y在特定元素上正常工作。在我的代码中，我最初将正文设置为overflow-y: hidden。但是，单击按钮后，我希望p标签可以滚动 - 这样用户就可以阅读所有文本了。但是，我似乎无法让这个工作。这是我的代码：

$(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

你的p需要一个高度。分配它100%，然后内容将超出该高度，触发滚动。

$(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

您必须在p标签中添加一个height属性，以指示100％这将触发滚动。

$(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>

仅在一个元素上使用CSS溢出

2 个答案: