个人中心
gpt4 book ai didi

javascript - 溢流体不起作用？

转载 作者：行者123 更新时间：2023-11-28 15:47:35 26 4
gpt4 key购买 nike

所以我已经为这个问题苦苦挣扎了好几天，我花了无数个小时试图阅读具有类似主题的线程，但没有一个对我有用......

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

这是一个使问题更直观的屏幕: Screen

所以我的目标是在模态显示时移除丑陋的双滚动条。

正如我在评论中所说的那样，即使我试图隐藏所有正文溢出，初始滚动条仍停留在那里...我很无能

比图像更好，我试图为您提供复制此页面行为的代码，希望我们能找到解决问题的方法。请注意，通常在原始代码中，有大量的 include 和 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>

最佳答案

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

我的建议是隐藏带有负边距的滚动条(例如:margin-right: -20px)和带有 overflow: hidden 的 wrapper。然后，用户只能使用鼠标滚轮或触摸板进行滚动。

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

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

如果你能创建页面的工作plunker，我会详细帮助你。

关于javascript - 溢流体不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42468246/

26 4 0
文章推荐： javascript - d3.js - 带 slider 的圆形动画
文章推荐： html - 在 HTML 页面上使用 CSS Sprite
文章推荐： javascript - 从 jQuery .click 增加一个变量
文章推荐： jquery - 为什么我的 css 和 div 不能正常工作？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com