我有一个网站，该网站的侧边栏可以打开，与主要内容重叠。可以通过使用translation-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>
答案 0 :(得分：0)
我认为这就是您要寻找的。您将需要一个简单的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>