отключить прокрутку основного контента при открытой прокручиваемой боковой панели - PullRequest
Новая
       43

отключить прокрутку основного контента при открытой прокручиваемой боковой панели

0 голосов
/ 04 октября 2018

У меня есть веб-сайт с боковой панелью, которая может открываться, перекрывая основной контент.Боковую панель можно открыть, используя translate-x ... или установив ее ширину на 100%, не имеет значения.

Проблема: когда боковая панель перекрывает основной контент, вы получаете 2 полосы прокрутки, одну длябоковая панель и одна для основного содержимого.

Я хочу отключить прокрутку на главном элементе, когда боковая панель открыта (например, ширина 100%).

Вот простой демонстрационный код: 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
}

#container {
    height: 100%;
}

#sidebar {
    background-color: #2980b9;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 18%;
    overflow: auto;
}

#content {
    background-color: #f8f8f8;
    display: inline-block;
    vertical-align: top;
    height: 100%;
    width: 82%;
    overflow: auto;
}

</style>
</head>

<body>

<div id="container">
    <div id="sidebar">
        <!-- Sidebar contents -->
        <div id="sidebar-content" style="height: 2800px"></div>
    </div><!--
 --><div id="content">
        <!-- Main contents -->
        <div id="main-content" style="height: 1800px">

        </div>
    </div>
</div>

</body>
</html>

1 Ответ

0 голосов
/ 04 октября 2018

Я думаю, это то, что вы ищете.Вам понадобится простая функция jQuery, которая блокирует фон, чтобы предотвратить прокрутку, пока ваша боковая панель видна.

Установив html и body на margin:0; height:100%; overflow:hidden, вы эффективно запретите прокрутку.

Если вы предоставите больше подробностей, я могу получить более подробную информацию, если потребуется.Надеюсь, это поможет! 

$('#btn').on('click', function() {
  $('.sidebar').toggleClass('slide');
  $('html body').toggleClass('lock');
});
body {
  background: #ececec;
  padding: 40px;
  p {
    max-width: 700px;
    margin: 20px auto;
  }
}

#btn {
  margin: 0 auto;
  padding: 10px 25px;
  background: indianred;
  color: white;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 5px;
}

.sidebar {
  position: fixed;
  top: 40px;
  left: 1400px;
  background: #007ccc;
  width: 400px;
  max-height: 600px;
  color: #fff;
  font-size: 14px;
  padding: 20px;
  overflow: auto;
  transition: transform ease .5s;
  border-radius: 5px;
}

.slide {
  left: 50%;
  transform: translate(-50%);
}

.lock {
  margin: 0;
  height: 100%;
  overflow: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button id="btn">CLICK ME</button>
  <div class="main">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor risus, placerat vel justo non, ultricies dignissim dui. Suspendisse potenti. Vestibulum dignissim enim a sem dapibus faucibus. Cras egestas erat non tellus ullamcorper, at rhoncus
      lacus placerat. Aenean in orci velit. Aliquam dapibus dignissim rutrum. Suspendisse vel sapien justo. Praesent ante nisl, fermentum facilisis ante quis, convallis congue justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <p>
      In at suscipit augue. In fermentum hendrerit libero, et placerat odio tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eu mattis erat. Aliquam vitae interdum velit. Proin vitae elit quis leo
      condimentum accumsan. Fusce id lorem felis. Sed in arcu in purus tristique tempor ac nec augue. Donec pellentesque nibh rutrum velit ornare, quis tempor nisi vehicula. Sed mollis est sed felis scelerisque, sed porttitor nisi tempor. Suspendisse
      eu eros eget augue aliquet bibendum non eu dui.
    </p>
    <p>

      Phasellus eu blandit elit, non elementum orci. Cras neque urna, laoreet eu sem eu, faucibus blandit massa. Curabitur sit amet tincidunt metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc quis lectus
      egestas, pulvinar mi vitae, fermentum sapien. Praesent iaculis, quam accumsan facilisis interdum, ligula ante sagittis nunc, id hendrerit odio lacus sed ex. Phasellus massa felis, aliquet quis imperdiet sodales, maximus in sapien.
    </p>
    <p>

      Morbi aliquam tristique ligula, eu pulvinar odio pretium sed. Nulla tincidunt sit amet velit eget consectetur. Aenean eros arcu, gravida a viverra eu, rutrum eu nunc. Nulla et nunc tristique, vestibulum eros ut, venenatis mauris. Integer eleifend a lorem
      eget tempor. Aliquam lacinia sed risus non rhoncus. Sed viverra mauris non molestie dignissim.
    </p>
    <p>
      Vivamus blandit, turpis id malesuada commodo, mauris purus cursus erat, in tincidunt mi quam at est. Suspendisse pharetra tempus laoreet. Suspendisse mollis odio in mi sollicitudin volutpat. Donec non nibh mollis, aliquet turpis in, rutrum justo. In sagittis
      ac tortor vitae venenatis. Aenean vestibulum urna sit amet tempor sagittis. Cras accumsan bibendum bibendum. Etiam tristique neque purus, convallis cursus lorem hendrerit nec. Nam rutrum, lectus sed finibus viverra, leo augue fermentum est, et varius
      metus erat sed odio. Sed ultrices posuere aliquam. Suspendisse egestas tincidunt augue id tempus. Proin vel molestie mauris. Nunc in malesuada orci. Phasellus at euismod quam. Praesent pretium varius nibh id rutrum. Donec posuere enim libero, vel
      porta ante consequat ac.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor risus, placerat vel justo non, ultricies dignissim dui. Suspendisse potenti. Vestibulum dignissim enim a sem dapibus faucibus. Cras egestas erat non tellus ullamcorper, at rhoncus
      lacus placerat. Aenean in orci velit. Aliquam dapibus dignissim rutrum. Suspendisse vel sapien justo. Praesent ante nisl, fermentum facilisis ante quis, convallis congue justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <p>
      In at suscipit augue. In fermentum hendrerit libero, et placerat odio tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eu mattis erat. Aliquam vitae interdum velit. Proin vitae elit quis leo
      condimentum accumsan. Fusce id lorem felis. Sed in arcu in purus tristique tempor ac nec augue. Donec pellentesque nibh rutrum velit ornare, quis tempor nisi vehicula. Sed mollis est sed felis scelerisque, sed porttitor nisi tempor. Suspendisse
      eu eros eget augue aliquet bibendum non eu dui.
    </p>
    <p>

      Phasellus eu blandit elit, non elementum orci. Cras neque urna, laoreet eu sem eu, faucibus blandit massa. Curabitur sit amet tincidunt metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc quis lectus
      egestas, pulvinar mi vitae, fermentum sapien. Praesent iaculis, quam accumsan facilisis interdum, ligula ante sagittis nunc, id hendrerit odio lacus sed ex. Phasellus massa felis, aliquet quis imperdiet sodales, maximus in sapien.
    </p>
    <p>

      Morbi aliquam tristique ligula, eu pulvinar odio pretium sed. Nulla tincidunt sit amet velit eget consectetur. Aenean eros arcu, gravida a viverra eu, rutrum eu nunc. Nulla et nunc tristique, vestibulum eros ut, venenatis mauris. Integer eleifend a lorem
      eget tempor. Aliquam lacinia sed risus non rhoncus. Sed viverra mauris non molestie dignissim.
    </p>
    <p>
      Vivamus blandit, turpis id malesuada commodo, mauris purus cursus erat, in tincidunt mi quam at est. Suspendisse pharetra tempus laoreet. Suspendisse mollis odio in mi sollicitudin volutpat. Donec non nibh mollis, aliquet turpis in, rutrum justo. In sagittis
      ac tortor vitae venenatis. Aenean vestibulum urna sit amet tempor sagittis. Cras accumsan bibendum bibendum. Etiam tristique neque purus, convallis cursus lorem hendrerit nec. Nam rutrum, lectus sed finibus viverra, leo augue fermentum est, et varius
      metus erat sed odio. Sed ultrices posuere aliquam. Suspendisse egestas tincidunt augue id tempus. Proin vel molestie mauris. Nunc in malesuada orci. Phasellus at euismod quam. Praesent pretium varius nibh id rutrum. Donec posuere enim libero, vel
      porta ante consequat ac.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor risus, placerat vel justo non, ultricies dignissim dui. Suspendisse potenti. Vestibulum dignissim enim a sem dapibus faucibus. Cras egestas erat non tellus ullamcorper, at rhoncus
      lacus placerat. Aenean in orci velit. Aliquam dapibus dignissim rutrum. Suspendisse vel sapien justo. Praesent ante nisl, fermentum facilisis ante quis, convallis congue justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <p>
      In at suscipit augue. In fermentum hendrerit libero, et placerat odio tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eu mattis erat. Aliquam vitae interdum velit. Proin vitae elit quis leo
      condimentum accumsan. Fusce id lorem felis. Sed in arcu in purus tristique tempor ac nec augue. Donec pellentesque nibh rutrum velit ornare, quis tempor nisi vehicula. Sed mollis est sed felis scelerisque, sed porttitor nisi tempor. Suspendisse
      eu eros eget augue aliquet bibendum non eu dui.
    </p>
    <p>

      Phasellus eu blandit elit, non elementum orci. Cras neque urna, laoreet eu sem eu, faucibus blandit massa. Curabitur sit amet tincidunt metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc quis lectus
      egestas, pulvinar mi vitae, fermentum sapien. Praesent iaculis, quam accumsan facilisis interdum, ligula ante sagittis nunc, id hendrerit odio lacus sed ex. Phasellus massa felis, aliquet quis imperdiet sodales, maximus in sapien.
    </p>
    <p>

      Morbi aliquam tristique ligula, eu pulvinar odio pretium sed. Nulla tincidunt sit amet velit eget consectetur. Aenean eros arcu, gravida a viverra eu, rutrum eu nunc. Nulla et nunc tristique, vestibulum eros ut, venenatis mauris. Integer eleifend a lorem
      eget tempor. Aliquam lacinia sed risus non rhoncus. Sed viverra mauris non molestie dignissim.
    </p>
    <p>
      Vivamus blandit, turpis id malesuada commodo, mauris purus cursus erat, in tincidunt mi quam at est. Suspendisse pharetra tempus laoreet. Suspendisse mollis odio in mi sollicitudin volutpat. Donec non nibh mollis, aliquet turpis in, rutrum justo. In sagittis
      ac tortor vitae venenatis. Aenean vestibulum urna sit amet tempor sagittis. Cras accumsan bibendum bibendum. Etiam tristique neque purus, convallis cursus lorem hendrerit nec. Nam rutrum, lectus sed finibus viverra, leo augue fermentum est, et varius
      metus erat sed odio. Sed ultrices posuere aliquam. Suspendisse egestas tincidunt augue id tempus. Proin vel molestie mauris. Nunc in malesuada orci. Phasellus at euismod quam. Praesent pretium varius nibh id rutrum. Donec posuere enim libero, vel
      porta ante consequat ac.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor risus, placerat vel justo non, ultricies dignissim dui. Suspendisse potenti. Vestibulum dignissim enim a sem dapibus faucibus. Cras egestas erat non tellus ullamcorper, at rhoncus
      lacus placerat. Aenean in orci velit. Aliquam dapibus dignissim rutrum. Suspendisse vel sapien justo. Praesent ante nisl, fermentum facilisis ante quis, convallis congue justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <p>
      In at suscipit augue. In fermentum hendrerit libero, et placerat odio tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eu mattis erat. Aliquam vitae interdum velit. Proin vitae elit quis leo
      condimentum accumsan. Fusce id lorem felis. Sed in arcu in purus tristique tempor ac nec augue. Donec pellentesque nibh rutrum velit ornare, quis tempor nisi vehicula. Sed mollis est sed felis scelerisque, sed porttitor nisi tempor. Suspendisse
      eu eros eget augue aliquet bibendum non eu dui.
    </p>
    <p>

      Phasellus eu blandit elit, non elementum orci. Cras neque urna, laoreet eu sem eu, faucibus blandit massa. Curabitur sit amet tincidunt metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc quis lectus
      egestas, pulvinar mi vitae, fermentum sapien. Praesent iaculis, quam accumsan facilisis interdum, ligula ante sagittis nunc, id hendrerit odio lacus sed ex. Phasellus massa felis, aliquet quis imperdiet sodales, maximus in sapien.
    </p>
    <p>

      Morbi aliquam tristique ligula, eu pulvinar odio pretium sed. Nulla tincidunt sit amet velit eget consectetur. Aenean eros arcu, gravida a viverra eu, rutrum eu nunc. Nulla et nunc tristique, vestibulum eros ut, venenatis mauris. Integer eleifend a lorem
      eget tempor. Aliquam lacinia sed risus non rhoncus. Sed viverra mauris non molestie dignissim.
    </p>
    <p>
      Vivamus blandit, turpis id malesuada commodo, mauris purus cursus erat, in tincidunt mi quam at est. Suspendisse pharetra tempus laoreet. Suspendisse mollis odio in mi sollicitudin volutpat. Donec non nibh mollis, aliquet turpis in, rutrum justo. In sagittis
      ac tortor vitae venenatis. Aenean vestibulum urna sit amet tempor sagittis. Cras accumsan bibendum bibendum. Etiam tristique neque purus, convallis cursus lorem hendrerit nec. Nam rutrum, lectus sed finibus viverra, leo augue fermentum est, et varius
      metus erat sed odio. Sed ultrices posuere aliquam. Suspendisse egestas tincidunt augue id tempus. Proin vel molestie mauris. Nunc in malesuada orci. Phasellus at euismod quam. Praesent pretium varius nibh id rutrum. Donec posuere enim libero, vel
      porta ante consequat ac.</p>
  </div>
  <div class="sidebar">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor risus, placerat vel justo non, ultricies dignissim dui. Suspendisse potenti. Vestibulum dignissim enim a sem dapibus faucibus. Cras egestas erat non tellus ullamcorper, at rhoncus
      lacus placerat. Aenean in orci velit. Aliquam dapibus dignissim rutrum. Suspendisse vel sapien justo. Praesent ante nisl, fermentum facilisis ante quis, convallis congue justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <p>
      In at suscipit augue. In fermentum hendrerit libero, et placerat odio tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eu mattis erat. Aliquam vitae interdum velit. Proin vitae elit quis leo
      condimentum accumsan. Fusce id lorem felis. Sed in arcu in purus tristique tempor ac nec augue. Donec pellentesque nibh rutrum velit ornare, quis tempor nisi vehicula. Sed mollis est sed felis scelerisque, sed porttitor nisi tempor. Suspendisse
      eu eros eget augue aliquet bibendum non eu dui.
    </p>
    <p>

      Phasellus eu blandit elit, non elementum orci. Cras neque urna, laoreet eu sem eu, faucibus blandit massa. Curabitur sit amet tincidunt metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc quis lectus
      egestas, pulvinar mi vitae, fermentum sapien. Praesent iaculis, quam accumsan facilisis interdum, ligula ante sagittis nunc, id hendrerit odio lacus sed ex. Phasellus massa felis, aliquet quis imperdiet sodales, maximus in sapien.
    </p>
    <p>

      Morbi aliquam tristique ligula, eu pulvinar odio pretium sed. Nulla tincidunt sit amet velit eget consectetur. Aenean eros arcu, gravida a viverra eu, rutrum eu nunc. Nulla et nunc tristique, vestibulum eros ut, venenatis mauris. Integer eleifend a lorem
      eget tempor. Aliquam lacinia sed risus non rhoncus. Sed viverra mauris non molestie dignissim.
    </p>
    <p>
      Vivamus blandit, turpis id malesuada commodo, mauris purus cursus erat, in tincidunt mi quam at est. Suspendisse pharetra tempus laoreet. Suspendisse mollis odio in mi sollicitudin volutpat. Donec non nibh mollis, aliquet turpis in, rutrum justo. In sagittis
      ac tortor vitae venenatis. Aenean vestibulum urna sit amet tempor sagittis. Cras accumsan bibendum bibendum. Etiam tristique neque purus, convallis cursus lorem hendrerit nec. Nam rutrum, lectus sed finibus viverra, leo augue fermentum est, et varius
      metus erat sed odio. Sed ultrices posuere aliquam. Suspendisse egestas tincidunt augue id tempus. Proin vel molestie mauris. Nunc in malesuada orci. Phasellus at euismod quam. Praesent pretium varius nibh id rutrum. Donec posuere enim libero, vel
      porta ante consequat ac.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dolor risus, placerat vel justo non, ultricies dignissim dui. Suspendisse potenti. Vestibulum dignissim enim a sem dapibus faucibus. Cras egestas erat non tellus ullamcorper, at rhoncus
      lacus placerat. Aenean in orci velit. Aliquam dapibus dignissim rutrum. Suspendisse vel sapien justo. Praesent ante nisl, fermentum facilisis ante quis, convallis congue justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <p>
      In at suscipit augue. In fermentum hendrerit libero, et placerat odio tempus eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean eu mattis erat. Aliquam vitae interdum velit. Proin vitae elit quis leo
      condimentum accumsan. Fusce id lorem felis. Sed in arcu in purus tristique tempor ac nec augue. Donec pellentesque nibh rutrum velit ornare, quis tempor nisi vehicula. Sed mollis est sed felis scelerisque, sed porttitor nisi tempor. Suspendisse
      eu eros eget augue aliquet bibendum non eu dui.
    </p>
    <p>

      Phasellus eu blandit elit, non elementum orci. Cras neque urna, laoreet eu sem eu, faucibus blandit massa. Curabitur sit amet tincidunt metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc quis lectus
      egestas, pulvinar mi vitae, fermentum sapien. Praesent iaculis, quam accumsan facilisis interdum, ligula ante sagittis nunc, id hendrerit odio lacus sed ex. Phasellus massa felis, aliquet quis imperdiet sodales, maximus in sapien.
    </p>
    <p>

      Morbi aliquam tristique ligula, eu pulvinar odio pretium sed. Nulla tincidunt sit amet velit eget consectetur. Aenean eros arcu, gravida a viverra eu, rutrum eu nunc. Nulla et nunc tristique, vestibulum eros ut, venenatis mauris. Integer eleifend a lorem
      eget tempor. Aliquam lacinia sed risus non rhoncus. Sed viverra mauris non molestie dignissim.
    </p>
    <p>
      Vivamus blandit, turpis id malesuada commodo, mauris purus cursus erat, in tincidunt mi quam at est. Suspendisse pharetra tempus laoreet. Suspendisse mollis odio in mi sollicitudin volutpat. Donec non nibh mollis, aliquet turpis in, rutrum justo. In sagittis
      ac tortor vitae venenatis. Aenean vestibulum urna sit amet tempor sagittis. Cras accumsan bibendum bibendum. Etiam tristique neque purus, convallis cursus lorem hendrerit nec. Nam rutrum, lectus sed finibus viverra, leo augue fermentum est, et varius
      metus erat sed odio. Sed ultrices posuere aliquam. Suspendisse egestas tincidunt augue id tempus. Proin vel molestie mauris. Nunc in malesuada orci. Phasellus at euismod quam. Praesent pretium varius nibh id rutrum. Donec posuere enim libero, vel
      porta ante consequat ac.</p>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...