Окно с overflow-y

// Начнём 
var $window = $('.window'), 
    $windowContent = $('.window-content'), 
    $windowBody = $('.window-body'), 
    $windowBackground = $('.window-background'); 
 
// Для начала мы расчитаем высоту для нашего блока .window-body 
// Для этого нам нужно знать, сколько % занимает содержимое окна 
var int__pctWindowContent = $('.window-content').outerHeight(true) / $('.window').outerHeight(true); 
 
//  Это значение присваивает для тела окна 
$windowBody.css('height', (int__pctWindowContent * 100) + '%'); 
 
// Теперь делаем функцию, для переноса значений прокрутки 
$windowBackground.scroll(function() { 
  var $self = $(this); 
   
  var int__selfScrollTop = $self.scrollTop(), 
      // Узнаём, сколько % контента прокручено 
      int__pctScrollTop = int__selfScrollTop / $windowBody.outerHeight(true); 
   
  // Узнаём сколько это от высоты контента 
  var int__windowScrollTop = int__pctScrollTop * $windowContent.outerHeight(true); 
   
  // Присваиваем это значение для окна 
  $window.scrollTop(int__windowScrollTop); 
});

.window-background { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-color: rgba(0, 0, 0, .5); 
  overflow-y: auto; 
} 
.window { 
    position: fixed; 
    top: 10%; 
    bottom: 10%; 
    left: 20%; 
    right: 20%; 
    overflow: hidden; 
    background-color: white; 
} 
.window-content { 
  padding: 20px; 
} 
.window-content > div + div { 
  margin-top: 12px; 
} 
.window-body { 
  visibility: hidden; 
  width: 100%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
Тут содержимое страницы :) 
 
<div class="window-background"> 
  <div class="window-body"></div> 
  <div class="window"> 
    <div class="window-content"> 
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque excepturi quibusdam ipsam perferendis nihil voluptate. Voluptatum officia molestiae illo dolorum quibusdam perspiciatis, repellat quas perferendis illum nam eius facere unde.</div> 
      <div>Quod saepe quibusdam, enim! Aperiam earum nulla voluptatum nisi, alias ab qui impedit at, sed esse a debitis dignissimos atque! Ipsum laborum, eius doloribus ipsam! Accusamus voluptates provident, recusandae non.</div> 
      <div>Odio doloremque voluptatum dolores nesciunt, harum, placeat quisquam nisi rerum quas eos, magni natus, eligendi modi enim a sapiente quibusdam. Qui facere quo non aperiam et mollitia nostrum atque porro.</div> 
      <div>Sed nihil odit magnam laudantium aliquam quis accusantium natus odio neque architecto, non laborum commodi saepe asperiores harum officia autem optio id. Placeat quo quia, adipisci dolorem recusandae fugit illo.</div> 
      <div>Eius repudiandae, obcaecati, at ad recusandae non nisi sapiente voluptatibus numquam dolor harum tempora et nemo reiciendis sunt vitae quibusdam voluptas! Veritatis nostrum rerum, aliquam numquam, doloremque ratione corporis minima?</div> 
      <div>Ad voluptatum culpa ipsum voluptatem ab eius nostrum commodi omnis et, cum dignissimos minus soluta adipisci amet asperiores praesentium modi voluptate est reiciendis itaque suscipit in libero ipsam, perspiciatis laudantium.</div> 
      <div>Veritatis corporis consectetur magnam, perferendis unde quae ipsam velit veniam soluta autem vel eum eos provident dolor nostrum dolorum quisquam iste eligendi, natus quam odit saepe! Necessitatibus omnis nam magni.</div> 
      <div>A cupiditate ut repudiandae quis pariatur culpa hic atque modi adipisci suscipit laudantium, in, assumenda fugit vitae excepturi, repellat officiis! Facilis fugit explicabo, provident commodi perspiciatis quasi eligendi tempora fugiat.</div> 
      <div>Dignissimos nemo porro, non possimus, tempore magnam! Saepe est accusamus repellat, beatae hic deleniti! Iure atque accusamus consectetur quidem reprehenderit sunt voluptatum asperiores fuga earum ex accusantium, doloremque totam vitae.</div> 
      <div>Culpa accusamus, iste pariatur laboriosam suscipit magnam iusto dolores quaerat consequatur veniam eum architecto eaque optio illo? Repellat, vel, doloribus. Beatae error suscipit necessitatibus, esse totam minima inventore id libero!</div> 
      <div>Architecto, illo cum fuga unde eligendi molestiae dignissimos nihil recusandae veniam. Ipsum dolorum iure, consequuntur beatae. Debitis commodi quaerat quas nobis, soluta, ratione adipisci dignissimos? Eos, sequi eveniet minus fugit.</div> 
      <div>Explicabo natus error quia doloribus molestias sapiente id facilis temporibus eveniet earum quis voluptatem ullam, eos cumque blanditiis inventore. Dolorem atque nihil ipsa delectus, perferendis iste obcaecati dolorum incidunt sapiente?</div> 
      <div>Blanditiis at minus eius sequi mollitia debitis suscipit, reprehenderit doloribus aliquam consequatur. Nam voluptate laboriosam, consequuntur eius et rem dolore facilis mollitia repudiandae, voluptatum neque obcaecati ratione odit nisi at.</div> 
      <div>Quidem ex cumque amet, repellendus aut, dolorum eaque sed officiis repudiandae labore harum voluptatibus neque reiciendis ut impedit cupiditate eveniet earum blanditiis, non optio iste explicabo. Voluptates, veritatis error exercitationem.</div> 
      <div>Beatae deserunt accusantium omnis perspiciatis exercitationem illo, architecto nesciunt pariatur quidem minima vel debitis eius possimus dolores dolore assumenda non ducimus qui ab explicabo a, mollitia fuga quisquam! Pariatur, totam!</div> 
      <div>Odio rerum explicabo obcaecati quasi eligendi consequuntur sit vitae possimus minus, expedita quidem itaque harum iure aspernatur. Voluptate adipisci ex, beatae, dicta laudantium ipsa quis ducimus repudiandae, doloremque iste, exercitationem!</div> 
      <div>Beatae rerum magnam, tenetur numquam officiis adipisci hic excepturi, dolor alias dicta harum quasi quibusdam, vero, placeat impedit natus. Ab quod a nisi dolor, odio quidem mollitia voluptatibus minima doloribus.</div> 
      <div>Tenetur corporis itaque ipsum distinctio sint optio ipsa, id perferendis consequuntur quas officiis corrupti inventore, ipsam dolores in eum sed expedita quae aliquid culpa minima aliquam magni aperiam! Obcaecati, ad.</div> 
      <div>Fugiat voluptatem officia sint fugit tempora optio nostrum aperiam, doloremque et, alias quidem at atque ut, laboriosam molestiae distinctio! Doloribus beatae sapiente, adipisci aliquid quidem fugit voluptatem nam sint ipsam?</div> 
      <div>Aliquam, quidem harum. Magni ab tempora, porro quo architecto, voluptas ipsam maiores, earum facere laboriosam minus excepturi impedit nihil modi voluptatibus, error eius. Quasi, amet, voluptates. Omnis assumenda, explicabo voluptatum.</div> 
      <div>Tempore quam inventore et dolorum sequi, id, commodi saepe possimus cumque quaerat dignissimos earum veritatis nesciunt architecto doloremque! Temporibus veritatis laboriosam fugiat recusandae quos quasi eligendi dolores, soluta maiores ad.</div> 
      <div>Atque dolorum dolorem alias dolore. Quia praesentium quibusdam ad ea vero assumenda autem quas nulla, architecto, illum maxime? Maxime dolorem at, ut quos velit ipsum! Rem sapiente illo obcaecati eum.</div> 
      <div>Minima voluptatem nemo soluta, aliquam aperiam numquam, velit laborum non vero sint, similique atque necessitatibus error minus. Saepe cupiditate accusamus quaerat voluptates? Quia doloribus iste totam neque ea illo inventore!</div> 
      <div>Quisquam debitis, quo mollitia a optio vitae atque animi beatae quos laboriosam voluptatem itaque vel odit perspiciatis reiciendis maiores doloremque voluptas enim! Porro labore adipisci, quibusdam, consectetur placeat optio distinctio!</div> 
      <div>Sunt obcaecati, aliquam laudantium natus, doloribus suscipit blanditiis nisi assumenda facilis dignissimos distinctio est at delectus neque ad voluptas enim quas vel similique veniam, eaque fugit laborum magni harum! Exercitationem.</div> 
      <div>Perspiciatis sapiente similique ut tempora! Similique impedit cum distinctio eum necessitatibus et odit, cumque optio odio eveniet voluptatibus at fugiat deleniti reprehenderit, ad temporibus laboriosam amet blanditiis consequuntur a ipsa.</div> 
      <div>Voluptatem omnis aperiam nemo, deserunt odio neque odit non enim possimus ea, magnam libero, dignissimos totam atque, voluptas vel dicta repudiandae! Repellat fugit magnam veniam dolore nostrum deserunt, dolores hic!</div> 
      <div>Architecto rerum sapiente voluptate eum omnis vitae error totam cumque quibusdam eveniet in, eligendi ea fugiat? Aliquid, atque. Veniam aliquid perspiciatis voluptates suscipit quidem voluptatibus eius minus, eum possimus facere!</div> 
      <div>Consectetur tenetur aspernatur, autem dolorum quia dolor. Deserunt harum ex deleniti veniam amet quaerat similique. Sapiente tempore sunt amet. Error mollitia libero voluptates doloremque ipsam, explicabo modi nostrum atque fugiat.</div> 
      <div>Voluptatem sunt asperiores soluta illo optio, qui excepturi, rem sint. Dolores eum repellendus fugit eveniet beatae nulla animi. Eaque incidunt, id quaerat voluptate veniam, fuga rerum unde ipsam earum provident.</div> 
      <div>Repellat harum tenetur perspiciatis alias ipsa quisquam? Provident soluta eos unde! Voluptatum praesentium autem labore laudantium itaque perferendis laborum deleniti fugiat suscipit. Ipsam mollitia, commodi eos. Quaerat a voluptas animi!</div> 
      <div>Nemo culpa iusto quae aliquam itaque hic, laborum sequi placeat! Unde quo, nesciunt similique nihil sed qui recusandae ratione itaque provident quidem asperiores incidunt cupiditate quisquam, nulla. Impedit totam, quod.</div> 
      <div>Nam tempore aliquam, sapiente porro quis enim blanditiis tempora, officia suscipit ea modi hic esse unde expedita consectetur consequuntur eos ex odio ipsa itaque voluptate assumenda quisquam nostrum aspernatur. Expedita.</div> 
      <div>Nesciunt autem eos libero quam, voluptatem molestiae molestias quo eius error itaque. Minima quasi iure dolorem officia eaque perspiciatis esse culpa! Possimus blanditiis laborum, vitae iste, quod doloribus similique illo.</div> 
      <div>Veritatis repellendus iusto explicabo, ea deleniti molestiae est atque qui inventore reprehenderit! Sapiente vitae omnis quibusdam, necessitatibus. Dolor quibusdam molestiae similique. Possimus sit debitis voluptatibus soluta, nostrum quae error 
        esse.</div> 
      <div>Nulla quis ut obcaecati, molestias natus deleniti est quia similique odit perferendis nam pariatur iure ab, debitis doloremque repudiandae dignissimos ad doloribus. Vero odit maxime, esse praesentium repellat perferendis pariatur.</div> 
      <div>Saepe earum repellat, quaerat animi aperiam optio, illum nesciunt cumque deserunt ut suscipit omnis facilis at maiores veniam ducimus eos eum. Optio perspiciatis minus quam eveniet, maxime praesentium numquam corporis.</div> 
      <div>Reiciendis dolore ipsum, omnis. Voluptates odio aspernatur delectus, atque, quos ipsum alias pariatur cum aut blanditiis! Delectus libero nam eaque tenetur eos doloribus architecto voluptate nisi dolorum. Saepe, nihil ullam.</div> 
      <div>Voluptates mollitia rem distinctio dicta ipsam aperiam laudantium eius iure incidunt cupiditate eligendi similique earum, ut consectetur ad accusantium, illum quas modi, quo, impedit. A in quo aperiam illum, suscipit.</div> 
      <div>Dignissimos praesentium temporibus reprehenderit debitis odio voluptatibus placeat, corporis dolor libero inventore. Magni odio similique, perspiciatis, excepturi nihil voluptatum suscipit. Similique corporis, ut repellendus eligendi tempora sapiente 
        nam aut error.</div> 
      <div>Ea nihil optio sequi consequuntur! Animi reiciendis, corporis dolore, quaerat ut excepturi, veniam quasi, laudantium explicabo commodi id asperiores sequi minus obcaecati voluptatibus reprehenderit error quis omnis maiores atque? Sit.</div> 
      <div>Dolorem dolor, omnis rerum! Magnam quia aliquam id nulla nobis cupiditate hic veritatis autem. Commodi ipsum repellat accusamus sapiente. Et nihil quis fugit non at doloribus dolorum sed laboriosam, commodi.</div> 
      <div>Enim odio consequuntur id dolorem, tenetur provident eum labore maxime officia fugit voluptate vero nam, culpa cumque similique iusto molestias autem explicabo pariatur esse minus nulla! Repellendus est quod ratione.</div> 
      <div>Provident consectetur itaque placeat, consequatur eum a neque, necessitatibus cumque, excepturi iste incidunt. Consectetur eos similique perferendis illo velit est, dolor doloribus libero dolorem fuga magni praesentium quo iure recusandae?</div> 
      <div>Dolores officiis quia fugiat totam cum, doloribus maxime alias enim aliquid doloremque itaque iusto ad reprehenderit illum quae, libero, hic culpa reiciendis vitae eveniet atque rem dignissimos! Ad, iure, accusantium.</div> 
      <div>Ipsa sunt adipisci ut eveniet, quisquam temporibus unde, ullam ipsam quam voluptates minima porro deleniti consequatur suscipit tenetur. Quo, iusto beatae quis distinctio in voluptatum possimus ratione culpa praesentium voluptate!</div> 
      <div>Sequi tempore labore deserunt laboriosam suscipit odio repudiandae sed necessitatibus cum adipisci architecto rem, nobis optio aperiam consequatur inventore a. Nemo animi, magnam impedit quae repellat sint laudantium inventore nam?</div> 
      <div>Ipsam recusandae doloremque alias ratione debitis. Eveniet repellendus doloribus molestiae, reprehenderit. Tempore, reiciendis ducimus ut accusamus molestias voluptatum pariatur magnam id quae est corporis repellendus soluta, consequuntur neque 
        eos doloribus!</div> 
      <div>Porro, aliquam cumque? Repellendus laudantium non, blanditiis minima quibusdam nobis modi obcaecati at, suscipit molestiae. Laboriosam hic, maiores error eaque eveniet dolor mollitia, ratione quaerat veniam ab repellat culpa cumque?</div> 
      <div>Dolore, nisi, perferendis. Placeat, quae? At provident non, temporibus eum perferendis maiores autem natus reprehenderit cum labore veniam recusandae, repellat tempora minima hic enim, debitis iure repellendus magni odio pariatur!</div> 
    </div> 
  </div> 
</div>

.window-background { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-color: rgba(0, 0, 0, .5); 
  overflow-y: auto; 
} 
.window { 
    position: absolute; 
    left: 20%; 
    right: 20%; 
    margin: 10% 0; 
    background-color: white; 
} 
.window-content { 
  padding: 20px; 
} 
.window-content > div + div { 
  margin-top: 12px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
Тут содержимое страницы :) 
 
<div class="window-background"> 
  <div class="window"> 
    <div class="window-content"> 
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque excepturi quibusdam ipsam perferendis nihil voluptate. Voluptatum officia molestiae illo dolorum quibusdam perspiciatis, repellat quas perferendis illum nam eius facere unde.</div> 
      <div>Quod saepe quibusdam, enim! Aperiam earum nulla voluptatum nisi, alias ab qui impedit at, sed esse a debitis dignissimos atque! Ipsum laborum, eius doloribus ipsam! Accusamus voluptates provident, recusandae non.</div> 
      <div>Odio doloremque voluptatum dolores nesciunt, harum, placeat quisquam nisi rerum quas eos, magni natus, eligendi modi enim a sapiente quibusdam. Qui facere quo non aperiam et mollitia nostrum atque porro.</div> 
      <div>Sed nihil odit magnam laudantium aliquam quis accusantium natus odio neque architecto, non laborum commodi saepe asperiores harum officia autem optio id. Placeat quo quia, adipisci dolorem recusandae fugit illo.</div> 
      <div>Eius repudiandae, obcaecati, at ad recusandae non nisi sapiente voluptatibus numquam dolor harum tempora et nemo reiciendis sunt vitae quibusdam voluptas! Veritatis nostrum rerum, aliquam numquam, doloremque ratione corporis minima?</div> 
      <div>Ad voluptatum culpa ipsum voluptatem ab eius nostrum commodi omnis et, cum dignissimos minus soluta adipisci amet asperiores praesentium modi voluptate est reiciendis itaque suscipit in libero ipsam, perspiciatis laudantium.</div> 
      <div>Veritatis corporis consectetur magnam, perferendis unde quae ipsam velit veniam soluta autem vel eum eos provident dolor nostrum dolorum quisquam iste eligendi, natus quam odit saepe! Necessitatibus omnis nam magni.</div> 
      <div>A cupiditate ut repudiandae quis pariatur culpa hic atque modi adipisci suscipit laudantium, in, assumenda fugit vitae excepturi, repellat officiis! Facilis fugit explicabo, provident commodi perspiciatis quasi eligendi tempora fugiat.</div> 
      <div>Dignissimos nemo porro, non possimus, tempore magnam! Saepe est accusamus repellat, beatae hic deleniti! Iure atque accusamus consectetur quidem reprehenderit sunt voluptatum asperiores fuga earum ex accusantium, doloremque totam vitae.</div> 
      <div>Culpa accusamus, iste pariatur laboriosam suscipit magnam iusto dolores quaerat consequatur veniam eum architecto eaque optio illo? Repellat, vel, doloribus. Beatae error suscipit necessitatibus, esse totam minima inventore id libero!</div> 
      <div>Architecto, illo cum fuga unde eligendi molestiae dignissimos nihil recusandae veniam. Ipsum dolorum iure, consequuntur beatae. Debitis commodi quaerat quas nobis, soluta, ratione adipisci dignissimos? Eos, sequi eveniet minus fugit.</div> 
      <div>Explicabo natus error quia doloribus molestias sapiente id facilis temporibus eveniet earum quis voluptatem ullam, eos cumque blanditiis inventore. Dolorem atque nihil ipsa delectus, perferendis iste obcaecati dolorum incidunt sapiente?</div> 
      <div>Blanditiis at minus eius sequi mollitia debitis suscipit, reprehenderit doloribus aliquam consequatur. Nam voluptate laboriosam, consequuntur eius et rem dolore facilis mollitia repudiandae, voluptatum neque obcaecati ratione odit nisi at.</div> 
      <div>Quidem ex cumque amet, repellendus aut, dolorum eaque sed officiis repudiandae labore harum voluptatibus neque reiciendis ut impedit cupiditate eveniet earum blanditiis, non optio iste explicabo. Voluptates, veritatis error exercitationem.</div> 
      <div>Beatae deserunt accusantium omnis perspiciatis exercitationem illo, architecto nesciunt pariatur quidem minima vel debitis eius possimus dolores dolore assumenda non ducimus qui ab explicabo a, mollitia fuga quisquam! Pariatur, totam!</div> 
      <div>Odio rerum explicabo obcaecati quasi eligendi consequuntur sit vitae possimus minus, expedita quidem itaque harum iure aspernatur. Voluptate adipisci ex, beatae, dicta laudantium ipsa quis ducimus repudiandae, doloremque iste, exercitationem!</div> 
      <div>Beatae rerum magnam, tenetur numquam officiis adipisci hic excepturi, dolor alias dicta harum quasi quibusdam, vero, placeat impedit natus. Ab quod a nisi dolor, odio quidem mollitia voluptatibus minima doloribus.</div> 
      <div>Tenetur corporis itaque ipsum distinctio sint optio ipsa, id perferendis consequuntur quas officiis corrupti inventore, ipsam dolores in eum sed expedita quae aliquid culpa minima aliquam magni aperiam! Obcaecati, ad.</div> 
      <div>Fugiat voluptatem officia sint fugit tempora optio nostrum aperiam, doloremque et, alias quidem at atque ut, laboriosam molestiae distinctio! Doloribus beatae sapiente, adipisci aliquid quidem fugit voluptatem nam sint ipsam?</div> 
      <div>Aliquam, quidem harum. Magni ab tempora, porro quo architecto, voluptas ipsam maiores, earum facere laboriosam minus excepturi impedit nihil modi voluptatibus, error eius. Quasi, amet, voluptates. Omnis assumenda, explicabo voluptatum.</div> 
      <div>Tempore quam inventore et dolorum sequi, id, commodi saepe possimus cumque quaerat dignissimos earum veritatis nesciunt architecto doloremque! Temporibus veritatis laboriosam fugiat recusandae quos quasi eligendi dolores, soluta maiores ad.</div> 
      <div>Atque dolorum dolorem alias dolore. Quia praesentium quibusdam ad ea vero assumenda autem quas nulla, architecto, illum maxime? Maxime dolorem at, ut quos velit ipsum! Rem sapiente illo obcaecati eum.</div> 
      <div>Minima voluptatem nemo soluta, aliquam aperiam numquam, velit laborum non vero sint, similique atque necessitatibus error minus. Saepe cupiditate accusamus quaerat voluptates? Quia doloribus iste totam neque ea illo inventore!</div> 
      <div>Quisquam debitis, quo mollitia a optio vitae atque animi beatae quos laboriosam voluptatem itaque vel odit perspiciatis reiciendis maiores doloremque voluptas enim! Porro labore adipisci, quibusdam, consectetur placeat optio distinctio!</div> 
      <div>Sunt obcaecati, aliquam laudantium natus, doloribus suscipit blanditiis nisi assumenda facilis dignissimos distinctio est at delectus neque ad voluptas enim quas vel similique veniam, eaque fugit laborum magni harum! Exercitationem.</div> 
      <div>Perspiciatis sapiente similique ut tempora! Similique impedit cum distinctio eum necessitatibus et odit, cumque optio odio eveniet voluptatibus at fugiat deleniti reprehenderit, ad temporibus laboriosam amet blanditiis consequuntur a ipsa.</div> 
      <div>Voluptatem omnis aperiam nemo, deserunt odio neque odit non enim possimus ea, magnam libero, dignissimos totam atque, voluptas vel dicta repudiandae! Repellat fugit magnam veniam dolore nostrum deserunt, dolores hic!</div> 
      <div>Architecto rerum sapiente voluptate eum omnis vitae error totam cumque quibusdam eveniet in, eligendi ea fugiat? Aliquid, atque. Veniam aliquid perspiciatis voluptates suscipit quidem voluptatibus eius minus, eum possimus facere!</div> 
      <div>Consectetur tenetur aspernatur, autem dolorum quia dolor. Deserunt harum ex deleniti veniam amet quaerat similique. Sapiente tempore sunt amet. Error mollitia libero voluptates doloremque ipsam, explicabo modi nostrum atque fugiat.</div> 
      <div>Voluptatem sunt asperiores soluta illo optio, qui excepturi, rem sint. Dolores eum repellendus fugit eveniet beatae nulla animi. Eaque incidunt, id quaerat voluptate veniam, fuga rerum unde ipsam earum provident.</div> 
      <div>Repellat harum tenetur perspiciatis alias ipsa quisquam? Provident soluta eos unde! Voluptatum praesentium autem labore laudantium itaque perferendis laborum deleniti fugiat suscipit. Ipsam mollitia, commodi eos. Quaerat a voluptas animi!</div> 
      <div>Nemo culpa iusto quae aliquam itaque hic, laborum sequi placeat! Unde quo, nesciunt similique nihil sed qui recusandae ratione itaque provident quidem asperiores incidunt cupiditate quisquam, nulla. Impedit totam, quod.</div> 
      <div>Nam tempore aliquam, sapiente porro quis enim blanditiis tempora, officia suscipit ea modi hic esse unde expedita consectetur consequuntur eos ex odio ipsa itaque voluptate assumenda quisquam nostrum aspernatur. Expedita.</div> 
      <div>Nesciunt autem eos libero quam, voluptatem molestiae molestias quo eius error itaque. Minima quasi iure dolorem officia eaque perspiciatis esse culpa! Possimus blanditiis laborum, vitae iste, quod doloribus similique illo.</div> 
      <div>Veritatis repellendus iusto explicabo, ea deleniti molestiae est atque qui inventore reprehenderit! Sapiente vitae omnis quibusdam, necessitatibus. Dolor quibusdam molestiae similique. Possimus sit debitis voluptatibus soluta, nostrum quae error 
        esse.</div> 
      <div>Nulla quis ut obcaecati, molestias natus deleniti est quia similique odit perferendis nam pariatur iure ab, debitis doloremque repudiandae dignissimos ad doloribus. Vero odit maxime, esse praesentium repellat perferendis pariatur.</div> 
      <div>Saepe earum repellat, quaerat animi aperiam optio, illum nesciunt cumque deserunt ut suscipit omnis facilis at maiores veniam ducimus eos eum. Optio perspiciatis minus quam eveniet, maxime praesentium numquam corporis.</div> 
      <div>Reiciendis dolore ipsum, omnis. Voluptates odio aspernatur delectus, atque, quos ipsum alias pariatur cum aut blanditiis! Delectus libero nam eaque tenetur eos doloribus architecto voluptate nisi dolorum. Saepe, nihil ullam.</div> 
      <div>Voluptates mollitia rem distinctio dicta ipsam aperiam laudantium eius iure incidunt cupiditate eligendi similique earum, ut consectetur ad accusantium, illum quas modi, quo, impedit. A in quo aperiam illum, suscipit.</div> 
      <div>Dignissimos praesentium temporibus reprehenderit debitis odio voluptatibus placeat, corporis dolor libero inventore. Magni odio similique, perspiciatis, excepturi nihil voluptatum suscipit. Similique corporis, ut repellendus eligendi tempora sapiente 
        nam aut error.</div> 
      <div>Ea nihil optio sequi consequuntur! Animi reiciendis, corporis dolore, quaerat ut excepturi, veniam quasi, laudantium explicabo commodi id asperiores sequi minus obcaecati voluptatibus reprehenderit error quis omnis maiores atque? Sit.</div> 
      <div>Dolorem dolor, omnis rerum! Magnam quia aliquam id nulla nobis cupiditate hic veritatis autem. Commodi ipsum repellat accusamus sapiente. Et nihil quis fugit non at doloribus dolorum sed laboriosam, commodi.</div> 
      <div>Enim odio consequuntur id dolorem, tenetur provident eum labore maxime officia fugit voluptate vero nam, culpa cumque similique iusto molestias autem explicabo pariatur esse minus nulla! Repellendus est quod ratione.</div> 
      <div>Provident consectetur itaque placeat, consequatur eum a neque, necessitatibus cumque, excepturi iste incidunt. Consectetur eos similique perferendis illo velit est, dolor doloribus libero dolorem fuga magni praesentium quo iure recusandae?</div> 
      <div>Dolores officiis quia fugiat totam cum, doloribus maxime alias enim aliquid doloremque itaque iusto ad reprehenderit illum quae, libero, hic culpa reiciendis vitae eveniet atque rem dignissimos! Ad, iure, accusantium.</div> 
      <div>Ipsa sunt adipisci ut eveniet, quisquam temporibus unde, ullam ipsam quam voluptates minima porro deleniti consequatur suscipit tenetur. Quo, iusto beatae quis distinctio in voluptatum possimus ratione culpa praesentium voluptate!</div> 
      <div>Sequi tempore labore deserunt laboriosam suscipit odio repudiandae sed necessitatibus cum adipisci architecto rem, nobis optio aperiam consequatur inventore a. Nemo animi, magnam impedit quae repellat sint laudantium inventore nam?</div> 
      <div>Ipsam recusandae doloremque alias ratione debitis. Eveniet repellendus doloribus molestiae, reprehenderit. Tempore, reiciendis ducimus ut accusamus molestias voluptatum pariatur magnam id quae est corporis repellendus soluta, consequuntur neque 
        eos doloribus!</div> 
      <div>Porro, aliquam cumque? Repellendus laudantium non, blanditiis minima quibusdam nobis modi obcaecati at, suscipit molestiae. Laboriosam hic, maiores error eaque eveniet dolor mollitia, ratione quaerat veniam ab repellat culpa cumque?</div> 
      <div>Dolore, nisi, perferendis. Placeat, quae? At provident non, temporibus eum perferendis maiores autem natus reprehenderit cum labore veniam recusandae, repellat tempora minima hic enim, debitis iure repellendus magni odio pariatur!</div> 
    </div> 
  </div> 
</div>

.popUp { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background-color: rgba(0, 0, 0, .5); 
} 
 
.popUp_content-wrap { 
  overflow: hidden; 
  width: 50%; 
  height: 100%; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
} 
 
.popUp-content { 
  overflow-y: scroll; 
  width: calc(100% + 20px); 
  height: 100%; 
  background-color: red; 
}

<div class="popUp"> 
  <div class="popUp_content-wrap"> 
    <div class="popUp-content"> 
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque excepturi quibusdam ipsam perferendis nihil voluptate. Voluptatum officia molestiae illo dolorum quibusdam perspiciatis, repellat quas perferendis illum nam eius facere unde.</div> 
      <div>Quod saepe quibusdam, enim! Aperiam earum nulla voluptatum nisi, alias ab qui impedit at, sed esse a debitis dignissimos atque! Ipsum laborum, eius doloribus ipsam! Accusamus voluptates provident, recusandae non.</div> 
      <div>Odio doloremque voluptatum dolores nesciunt, harum, placeat quisquam nisi rerum quas eos, magni natus, eligendi modi enim a sapiente quibusdam. Qui facere quo non aperiam et mollitia nostrum atque porro.</div> 
      <div>Sed nihil odit magnam laudantium aliquam quis accusantium natus odio neque architecto, non laborum commodi saepe asperiores harum officia autem optio id. Placeat quo quia, adipisci dolorem recusandae fugit illo.</div> 
      <div>Eius repudiandae, obcaecati, at ad recusandae non nisi sapiente voluptatibus numquam dolor harum tempora et nemo reiciendis sunt vitae quibusdam voluptas! Veritatis nostrum rerum, aliquam numquam, doloremque ratione corporis minima?</div> 
      <div>Ad voluptatum culpa ipsum voluptatem ab eius nostrum commodi omnis et, cum dignissimos minus soluta adipisci amet asperiores praesentium modi voluptate est reiciendis itaque suscipit in libero ipsam, perspiciatis laudantium.</div> 
      <div>Veritatis corporis consectetur magnam, perferendis unde quae ipsam velit veniam soluta autem vel eum eos provident dolor nostrum dolorum quisquam iste eligendi, natus quam odit saepe! Necessitatibus omnis nam magni.</div> 
      <div>A cupiditate ut repudiandae quis pariatur culpa hic atque modi adipisci suscipit laudantium, in, assumenda fugit vitae excepturi, repellat officiis! Facilis fugit explicabo, provident commodi perspiciatis quasi eligendi tempora fugiat.</div> 
      <div>Dignissimos nemo porro, non possimus, tempore magnam! Saepe est accusamus repellat, beatae hic deleniti! Iure atque accusamus consectetur quidem reprehenderit sunt voluptatum asperiores fuga earum ex accusantium, doloremque totam vitae.</div> 
      <div>Culpa accusamus, iste pariatur laboriosam suscipit magnam iusto dolores quaerat consequatur veniam eum architecto eaque optio illo? Repellat, vel, doloribus. Beatae error suscipit necessitatibus, esse totam minima inventore id libero!</div> 
      <div>Architecto, illo cum fuga unde eligendi molestiae dignissimos nihil recusandae veniam. Ipsum dolorum iure, consequuntur beatae. Debitis commodi quaerat quas nobis, soluta, ratione adipisci dignissimos? Eos, sequi eveniet minus fugit.</div> 
      <div>Explicabo natus error quia doloribus molestias sapiente id facilis temporibus eveniet earum quis voluptatem ullam, eos cumque blanditiis inventore. Dolorem atque nihil ipsa delectus, perferendis iste obcaecati dolorum incidunt sapiente?</div> 
      <div>Blanditiis at minus eius sequi mollitia debitis suscipit, reprehenderit doloribus aliquam consequatur. Nam voluptate laboriosam, consequuntur eius et rem dolore facilis mollitia repudiandae, voluptatum neque obcaecati ratione odit nisi at.</div> 
      <div>Quidem ex cumque amet, repellendus aut, dolorum eaque sed officiis repudiandae labore harum voluptatibus neque reiciendis ut impedit cupiditate eveniet earum blanditiis, non optio iste explicabo. Voluptates, veritatis error exercitationem.</div> 
      <div>Beatae deserunt accusantium omnis perspiciatis exercitationem illo, architecto nesciunt pariatur quidem minima vel debitis eius possimus dolores dolore assumenda non ducimus qui ab explicabo a, mollitia fuga quisquam! Pariatur, totam!</div> 
      <div>Odio rerum explicabo obcaecati quasi eligendi consequuntur sit vitae possimus minus, expedita quidem itaque harum iure aspernatur. Voluptate adipisci ex, beatae, dicta laudantium ipsa quis ducimus repudiandae, doloremque iste, exercitationem!</div> 
      <div>Beatae rerum magnam, tenetur numquam officiis adipisci hic excepturi, dolor alias dicta harum quasi quibusdam, vero, placeat impedit natus. Ab quod a nisi dolor, odio quidem mollitia voluptatibus minima doloribus.</div> 
      <div>Tenetur corporis itaque ipsum distinctio sint optio ipsa, id perferendis consequuntur quas officiis corrupti inventore, ipsam dolores in eum sed expedita quae aliquid culpa minima aliquam magni aperiam! Obcaecati, ad.</div> 
      <div>Fugiat voluptatem officia sint fugit tempora optio nostrum aperiam, doloremque et, alias quidem at atque ut, laboriosam molestiae distinctio! Doloribus beatae sapiente, adipisci aliquid quidem fugit voluptatem nam sint ipsam?</div> 
      <div>Aliquam, quidem harum. Magni ab tempora, porro quo architecto, voluptas ipsam maiores, earum facere laboriosam minus excepturi impedit nihil modi voluptatibus, error eius. Quasi, amet, voluptates. Omnis assumenda, explicabo voluptatum.</div> 
      <div>Tempore quam inventore et dolorum sequi, id, commodi saepe possimus cumque quaerat dignissimos earum veritatis nesciunt architecto doloremque! Temporibus veritatis laboriosam fugiat recusandae quos quasi eligendi dolores, soluta maiores ad.</div> 
      <div>Atque dolorum dolorem alias dolore. Quia praesentium quibusdam ad ea vero assumenda autem quas nulla, architecto, illum maxime? Maxime dolorem at, ut quos velit ipsum! Rem sapiente illo obcaecati eum.</div> 
      <div>Minima voluptatem nemo soluta, aliquam aperiam numquam, velit laborum non vero sint, similique atque necessitatibus error minus. Saepe cupiditate accusamus quaerat voluptates? Quia doloribus iste totam neque ea illo inventore!</div> 
      <div>Quisquam debitis, quo mollitia a optio vitae atque animi beatae quos laboriosam voluptatem itaque vel odit perspiciatis reiciendis maiores doloremque voluptas enim! Porro labore adipisci, quibusdam, consectetur placeat optio distinctio!</div> 
      <div>Sunt obcaecati, aliquam laudantium natus, doloribus suscipit blanditiis nisi assumenda facilis dignissimos distinctio est at delectus neque ad voluptas enim quas vel similique veniam, eaque fugit laborum magni harum! Exercitationem.</div> 
      <div>Perspiciatis sapiente similique ut tempora! Similique impedit cum distinctio eum necessitatibus et odit, cumque optio odio eveniet voluptatibus at fugiat deleniti reprehenderit, ad temporibus laboriosam amet blanditiis consequuntur a ipsa.</div> 
      <div>Voluptatem omnis aperiam nemo, deserunt odio neque odit non enim possimus ea, magnam libero, dignissimos totam atque, voluptas vel dicta repudiandae! Repellat fugit magnam veniam dolore nostrum deserunt, dolores hic!</div> 
      <div>Architecto rerum sapiente voluptate eum omnis vitae error totam cumque quibusdam eveniet in, eligendi ea fugiat? Aliquid, atque. Veniam aliquid perspiciatis voluptates suscipit quidem voluptatibus eius minus, eum possimus facere!</div> 
      <div>Consectetur tenetur aspernatur, autem dolorum quia dolor. Deserunt harum ex deleniti veniam amet quaerat similique. Sapiente tempore sunt amet. Error mollitia libero voluptates doloremque ipsam, explicabo modi nostrum atque fugiat.</div> 
      <div>Voluptatem sunt asperiores soluta illo optio, qui excepturi, rem sint. Dolores eum repellendus fugit eveniet beatae nulla animi. Eaque incidunt, id quaerat voluptate veniam, fuga rerum unde ipsam earum provident.</div> 
      <div>Repellat harum tenetur perspiciatis alias ipsa quisquam? Provident soluta eos unde! Voluptatum praesentium autem labore laudantium itaque perferendis laborum deleniti fugiat suscipit. Ipsam mollitia, commodi eos. Quaerat a voluptas animi!</div> 
      <div>Nemo culpa iusto quae aliquam itaque hic, laborum sequi placeat! Unde quo, nesciunt similique nihil sed qui recusandae ratione itaque provident quidem asperiores incidunt cupiditate quisquam, nulla. Impedit totam, quod.</div> 
      <div>Nam tempore aliquam, sapiente porro quis enim blanditiis tempora, officia suscipit ea modi hic esse unde expedita consectetur consequuntur eos ex odio ipsa itaque voluptate assumenda quisquam nostrum aspernatur. Expedita.</div> 
      <div>Nesciunt autem eos libero quam, voluptatem molestiae molestias quo eius error itaque. Minima quasi iure dolorem officia eaque perspiciatis esse culpa! Possimus blanditiis laborum, vitae iste, quod doloribus similique illo.</div> 
      <div>Veritatis repellendus iusto explicabo, ea deleniti molestiae est atque qui inventore reprehenderit! Sapiente vitae omnis quibusdam, necessitatibus. Dolor quibusdam molestiae similique. Possimus sit debitis voluptatibus soluta, nostrum quae error 
        esse.</div> 
      <div>Nulla quis ut obcaecati, molestias natus deleniti est quia similique odit perferendis nam pariatur iure ab, debitis doloremque repudiandae dignissimos ad doloribus. Vero odit maxime, esse praesentium repellat perferendis pariatur.</div> 
      <div>Saepe earum repellat, quaerat animi aperiam optio, illum nesciunt cumque deserunt ut suscipit omnis facilis at maiores veniam ducimus eos eum. Optio perspiciatis minus quam eveniet, maxime praesentium numquam corporis.</div> 
      <div>Reiciendis dolore ipsum, omnis. Voluptates odio aspernatur delectus, atque, quos ipsum alias pariatur cum aut blanditiis! Delectus libero nam eaque tenetur eos doloribus architecto voluptate nisi dolorum. Saepe, nihil ullam.</div> 
      <div>Voluptates mollitia rem distinctio dicta ipsam aperiam laudantium eius iure incidunt cupiditate eligendi similique earum, ut consectetur ad accusantium, illum quas modi, quo, impedit. A in quo aperiam illum, suscipit.</div> 
      <div>Dignissimos praesentium temporibus reprehenderit debitis odio voluptatibus placeat, corporis dolor libero inventore. Magni odio similique, perspiciatis, excepturi nihil voluptatum suscipit. Similique corporis, ut repellendus eligendi tempora sapiente 
        nam aut error.</div> 
      <div>Ea nihil optio sequi consequuntur! Animi reiciendis, corporis dolore, quaerat ut excepturi, veniam quasi, laudantium explicabo commodi id asperiores sequi minus obcaecati voluptatibus reprehenderit error quis omnis maiores atque? Sit.</div> 
      <div>Dolorem dolor, omnis rerum! Magnam quia aliquam id nulla nobis cupiditate hic veritatis autem. Commodi ipsum repellat accusamus sapiente. Et nihil quis fugit non at doloribus dolorum sed laboriosam, commodi.</div> 
      <div>Enim odio consequuntur id dolorem, tenetur provident eum labore maxime officia fugit voluptate vero nam, culpa cumque similique iusto molestias autem explicabo pariatur esse minus nulla! Repellendus est quod ratione.</div> 
      <div>Provident consectetur itaque placeat, consequatur eum a neque, necessitatibus cumque, excepturi iste incidunt. Consectetur eos similique perferendis illo velit est, dolor doloribus libero dolorem fuga magni praesentium quo iure recusandae?</div> 
      <div>Dolores officiis quia fugiat totam cum, doloribus maxime alias enim aliquid doloremque itaque iusto ad reprehenderit illum quae, libero, hic culpa reiciendis vitae eveniet atque rem dignissimos! Ad, iure, accusantium.</div> 
      <div>Ipsa sunt adipisci ut eveniet, quisquam temporibus unde, ullam ipsam quam voluptates minima porro deleniti consequatur suscipit tenetur. Quo, iusto beatae quis distinctio in voluptatum possimus ratione culpa praesentium voluptate!</div> 
      <div>Sequi tempore labore deserunt laboriosam suscipit odio repudiandae sed necessitatibus cum adipisci architecto rem, nobis optio aperiam consequatur inventore a. Nemo animi, magnam impedit quae repellat sint laudantium inventore nam?</div> 
      <div>Ipsam recusandae doloremque alias ratione debitis. Eveniet repellendus doloribus molestiae, reprehenderit. Tempore, reiciendis ducimus ut accusamus molestias voluptatum pariatur magnam id quae est corporis repellendus soluta, consequuntur neque 
        eos doloribus!</div> 
      <div>Porro, aliquam cumque? Repellendus laudantium non, blanditiis minima quibusdam nobis modi obcaecati at, suscipit molestiae. Laboriosam hic, maiores error eaque eveniet dolor mollitia, ratione quaerat veniam ab repellat culpa cumque?</div> 
      <div>Dolore, nisi, perferendis. Placeat, quae? At provident non, temporibus eum perferendis maiores autem natus reprehenderit cum labore veniam recusandae, repellat tempora minima hic enim, debitis iure repellendus magni odio pariatur!</div> 
    </div> 
  </div> 
</div>