javascript - 如何删除滚动sidenav

Question

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/>

<nav class="w3-sidenav w3-collapse w3-white w3-card-2 w3-animate-left" style="width:200px;">
  <a href="javascript:void(0)" onclick="w3_close()" 
  class="w3-closenav w3-large w3-hide-large">Close &times;</a>
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>		
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>		
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>		
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>		
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>		
  <a href="#">Link 1</a>		
  <a href="#">Link 2</a>		
  <a href="#">Link 3</a>		
  <a href="#">Link 4</a>		
  <a href="#">Link 5</a>					
</nav>

<div class="w3-main" style="margin-left:200px">
<header class="w3-container w3-teal">
  <span class="w3-opennav w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</span>
  <h2>Responsive Sidenav</h2>
</header>

<div class="w3-container">
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
  <p>In this example, the side navigation will always be displayed on desktop computers and laptops (screens wider than 991px), and hidden on tablets and mobile phones (screens that are less than 991px wide).</p>
  <p>On tablets and mobile phones the side navigation is replaced with a menu icon that opens the navigation pane when clicked on: it will then overlay/sit on top of the page content.</p>
  <p><b>Resize the browser window to understand how it works.</b></p>
</div>

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>
     
</div>

<script>
function w3_open() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
</script>

如何在 Sidenav 中删除滚动条？我使用 w3.css，我想要像 w3school 一样的 sidenav。当我的鼠标不在该区域时，可以看到 sidenav 中的滚动条。但是当我在 sidenav 中拖动鼠标时，它会显示滚动条，我可以向下滚动它。我试图做溢出:隐藏，溢出:可见但它不起作用。谢谢。 http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidenav_hide&stacked=h

Answer 1

您需要如下更改 css。

.w3-sidenav {
      background-color: #ffffff;
      float: left;
      height: 100%;
      overflow: auto;
      position: relative !important;
      width: 30%;
      z-index: 1;
    }
    .w3-main {
      float: left;
      margin-left: 0 !important;
      width: 70%;
    }