Как сделать overflow hidden для body по нажатию?
Нужно, чтобы по нажатию на .btn у body появлялся overflow hidden и также исчезал по повторному нажатию на .btn. Подскажите пожалуйста как это сделать?
$(document).ready(function(){
$('.btn').click(function(){
$('.body').css({"overflow: hidden;"});
return false;
});
});.btn {
background: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn">
нажать!
</div>
<div class="test">
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
<div class="text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo cumque a ipsa quis? Voluptate, aperiam. Repellat quos odio a omnis perferendis possimus optio pariatur similique quasi, impedit consequuntur nesciunt maxime velit sequi unde culpa asperiores ipsa facere accusamus nam exercitationem ullam magnam est quia! Modi in aspernatur vel quaerat debitis non ut, nemo impedit nobis, iusto ea alias velit blanditiis odit vitae tempore hic ad rem praesentium tempora, nulla accusantium. Aperiam, ullam saepe laudantium nostrum fugiat neque quod ab quas possimus enim dolorum obcaecati sint voluptas voluptatum eligendi, assumenda aut laboriosam, modi asperiores illo! Autem hic cum, provident est deleniti commodi magni delectus ratione eum fugit libero, dolores esse illo et rerum dignissimos pariatur corporis, porro natus consequuntur ab maiores architecto culpa dolorum! Odio, facilis ad nesciunt vero cum sunt corrupti sit? Saepe vel voluptas velit quos in officiis reiciendis, deleniti libero rerum? Suscipit aliquid, mollitia illo repellendus accusantium necessitatibus deserunt ducimus fugit accusamus, quaerat veniam iure similique ad nesciunt fugiat quos voluptatem illum eum sint hic quod? Cupiditate, natus ipsum aliquid commodi rem voluptates et perspiciatis laborum necessitatibus velit autem repellat aspernatur quidem veritatis obcaecati, dolorum provident. Temporibus placeat dolorem velit sunt eveniet, quibusdam cumque maiores totam distinctio iste.
</p>
</div>
</div>Источник: Stack Overflow на русском