我的网站有一个可以打开的侧边栏，与主要内容重叠。可以使用 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>
最佳答案
我想这就是您要找的。您将需要一个简单的 jQuery 函数来锁定背景以防止在边栏可见时滚动。
通过将html和body设置为margin:0;高度: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>关于jquery - 当可滚动侧边栏打开时禁用主要内容的滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52648873/