Question

所以我几天来一直在努力解决这个问题，我花了无数个小时尝试阅读类似主题的帖子，但没有一个能为我工作......

当模态出现时，我正试图隐藏身体溢出。

这是一个让问题更直观的屏幕：

所以我的目标是在模态出现时移除那个丑陋的双滚动条。

正如我一直在评论，即使我试图隐藏所有身体溢出，最初的滚动条停留在那里......我很无能

优于图像，我试图为您提供复制此页面行为的代码，希望我们能找到解决问题的方法。请注意，通常在原始代码中，有大量包含和php循环和函数调用，因此这可能会影响解决方案。

function Open(){         document.getElementById('createclub').style.display='block';      
      }
    function Close(){document.getElementById('createclub').style.display='none';}
    
    function w3_open() {document.getElementById("sidenav").style.display = "block";}
    function w3_close() {document.getElementById("sidenav").style.display = "none";}

// Solution 1

.w3-modal{
    overflow:hidden;
 }
 .w3-modal-content{
    overflow:scroll;
 }

<html>
  <head>
		<title>Table Display</title>
		<link rel="stylesheet" href="style.css">
		<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
	<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
	<link rel="stylesheet" href="lib/w3.css">
	</head>
  
  <body>
    <!-- Main Container-->
    <div class="w3-row"> 
      <!-- Header -->
      <div id="header" style="width:100%;height:150px" class="w3-container w3-display-top w3-diplay-container"> 
        <!-- Side Nav on Header -->
        <nav class="w3-sidenav w3-display-topright w3-black w3-padding-left-large w3-card-2 w3-animate-right" style="display:none;right:0;max-height:525px" id="sidenav">
          <a href="javascript:void(0)" onclick="w3_close()" class="w3-closenav w3-padding-large w3-margin-bottom w3-margin-top"><i class="fa fa-close w3-xxlarge">&nbspClose</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-home  w3-xxlarge ">&nbspHome</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-group  w3-xxlarge w3-padding-right">&nbspTable1</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-calendar  w3-xxlarge w3-padding-right">&nbsTable2</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-address-book  w3-xxlarge w3-padding-right">&nbspTable3</i></a>
          <a href="" class="w3-margin-bottom w3-padding-large" ><i class="fa fa-arrow-circle-left w3-xxlarge w3-padding-right">&nbspLogOut</i></a>
        </nav>

        <span class="w3-opennav w3-display-topright w3-xlarge w3-right" onclick="w3_open()"><h1>&#9776</h1></span>
        
       <!-- Header Image-->
        <img src="" class="w3-display-topmiddle">
		  </div> <!-- End of Header-->
      
      <!-- Side Profile=First Column-->
      <div class="w3-col m3 w3-padding-xlarge" >
			<div class="w3-card-2 w3-teal w3-round">
	        	<div class="w3-container">
	         		<h4 class="w3-center"><b>My Profile</b></h4>
	         		<p class="w3-center"><img src="" class="w3-circle" style="height:200px;width:200px" alt="Avatar"></p>'?>
			        <p><i class="fa fa-address-card fa-fw w3-margin-right w3-text-theme"></i>First Name</p>
			        <p><i class="fa fa-address-card-o fa-fw w3-margin-right w3-text-theme"></i>Last Name</p>
			        <p><i class="fa fa-birthday-cake fa-fw w3-margin-right w3-text-theme"></i>Birthday</p>
			        <p><i class="	fa fa-drivers-license fa-fw w3-margin-right w3-text-theme"></i>Job</p>
	        	</div>
	     	</div>
	    </div><!-- End of side profile-->
      
    <!-- Main Block=Middle Column, Displays a table from DB -->
    <div class="w3-col m7">
				<div class="w3-row-padding w3-margin-top">
				  <div class="w3-half">
							<div class="w3-card-2 w3-margin-bottom">
								<a href=""><img src="" alt="Norway" 
								style="height:200px;width:100%" class=" w3-center w3-hover-opacity"></a>
							    <div class="w3-container w3-teal">
							        <h5 class="w3-center"><b>Table Name</b></h5>
							        <a href=""><button class="w3-btn-block w3-black w3-margin-bottom w3-padding " type="submit" style="width:100%">Overview</button></a>
							        <a href=""><button class="w3-btn-block w3-black w3-margin-bottom w3-padding" type="submit" style="width:100%">Org.</button></a>
							        <a href=""><button class="w3-btn-block w3-black w3-padding w3-margin-bottom" type="submit" style="width:100%">Join</button></a>
							    </div>
							</div>
						</div>
			  </div>
			</div><!--End of Main Block-->
      
      <!-- Side Event=Third Column, this is where it all lies-->
        <div class="w3-col m2 w3-right w3-padding-xlarge">
          <div class="w3-card-2 w3-round w3-teal w3-center">
              <div class="w3-container">
              <p>Following Event:</p>
              <img src="" alt="Forest" style="width:100%;max-height:150px">
              <p><strong>Holiday</strong></p>
              <p>Friday 15:00</p>
              <p><button class="w3-btn w3-btn-block w3-theme-l4">+ Info</button></p>
              </div>
          </div>
          
          <!--  THE Modal --> 
           <button id="buttoncreate" onclick="Open()" class="modal-open-button w3-btn w3-border w3-margin w3-padding-large w3-right" >Create</button>
    	<div id="createclub" class="w3-modal">
    		<div class="w3-modal-content w3-card-8 w3-animate-zoom" style="max-width:600px;margin-top:-5%">
				<div class="w3-center"><br>
        			<span onclick="Close()" class="w3-closebtn w3-display-topright w3-hover-red w3-container w3-padding-10 " title="Close Modal">&times;</span>
        		</div>

        		<form class="w3-container" action="" method="post">
        			<div class="w3-section">
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="type name" name="name" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="type info" name="someinfo" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="date" name="date" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="type some theme" name="theme" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="email" placeholder="type email" name="email" required>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="password" placeholder="pass" name="pass" required>
        				
        				<textarea rows="4" cols="50" class="w3-input w3-border w3-margin-bottom" placeholder="type descr" name="descr" required></textarea>
        				
        				<input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="link image" name="image">
        				<button class="w3-btn-block w3-blue-grey w3-section w3-padding" type="submit">Submit</button>
        			</div>
        		</form>
        	</div>
        </div>
        </div>
    </div> <!-- End of Main Container -->
  </body>
</html>

Answer 1

一次一个滚动条:)据我所知，您想要删除模态内容的滚动条。但是，如图所示，模态内容的高度较长，因此需要滚动。

我的建议是隐藏带有负边距的滚动条（例如：margin-right：-20px）和包含overflow：hidden的包装。然后，用户只能使用鼠标滚轮或触摸板滚动。

<div class="modal-wrapper">
    <div class="modal-content"></div>
<div>

.modal-wrapper {
overflow: hidden;
}
.modal-content {
overflow: scroll;
margin-right: -20px;
}

如果您可以创建页面的工作plunker，我会详细帮助您。

Answer 2

this question中的答案建议将html和body的高度设置为100％：

html, body { height: 100% }

溢出的身体不起作用？

2 个答案: