第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

使 javascript 推送菜單可滾動(dòng)（無滾動(dòng)條）

使 javascript 推送菜單可滾動(dòng)（無滾動(dòng)條）

慕運(yùn)維8079593 2021-12-02 10:23:17
我有一個(gè)從頁面左側(cè)滑出的推送菜單（從左到右），將頁面向右滑動(dòng)。我試圖為它添加一個(gè)保護(hù)措施，如果鏈接超過頁面高度，菜單是可滾動(dòng)的。現(xiàn)在，它不起作用并且鏈接被隱藏。有人可以幫我弄清楚如何使菜單可滾動(dòng)。我試過添加scroll-y: scroll幾個(gè) css 元素，但這似乎沒有任何區(qū)別。我希望滾動(dòng)功能在手機(jī)上也能通過觸摸滾動(dòng)。而且，我想看看如何在菜單打開時(shí)禁用“主體”上的滾動(dòng)。$(document).ready(function() {  $menuLeft = $('.pushmenu-left');  $nav_list = $('#nav_list');  $nav_list.click(function() {    $(this).toggleClass('active');    $('.pushmenu-push').toggleClass('pushmenu-push-toright');    $menuLeft.toggleClass('pushmenu-open');  });});.pushmenu {  background: #444;  text-align: center;  font-family: Tahoma, Geneva, sans-serif;  width: 300px;  height: 100%;  top: 0;  z-index: 1000;  position: fixed;}.pushmenu h3 {  color: #f1f1f1;  font-size: 1.3em;  font-weight: 400;  padding: 15px 25px;  margin: 0;  background: #333;  height: 16px;}.links {  list-style-type: none;  padding: 0;  margin: 0 0 0 25%;  width: 50%;}.links li { margin-top: 30px; }.links li a {  position: relative;  display: block;  color: #f1f1f1;  font-size: 1.3em;  font-weight: 400;  text-decoration: none;  padding: 14px;}.links li a:after {  content: '';  display: block;  position: absolute;  left: 20px;  bottom: -5px;  width: 0;  height: 4px;  background-color: #f1f1f1;  -webkit-transition: width 0.3s ease;  -moz-transition: width 0.3s ease;  transition: width 0.3s ease;}.links li a:hover:after { width: 70%; }.links li a:active { color: #dbdbdb; }.pushmenu-left { left: -300px; }.pushmenu-left.pushmenu-open { left: 0; }.pushmenu-push {  overflow-x: hidden;  position: relative;  left: 0;}.pushmenu-push-toright { left: 300px; }.pushmenu, .pushmenu-push {-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;}<body class="pushmenu-push"><nav class="pushmenu pushmenu-left">  <ul class="links">    <li><a href="index">Home</a></li>    <li><a href="#">About Us</a></li>    <li><a href="#">Missions</a></li>    <li><a href="#">Partners</a></li>    <li><a href="#">Events</a></li>    <li><a href="#">Contact</a></li>    <li><a href="#">Give</a></li>   
查看完整描述

3 回答

?
飲歌長嘯

TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊

我最終找到了一種方法，通過添加一個(gè)內(nèi)部容器并在兩者上使用溢出，在沒有滾動(dòng)條的情況下做我想做的事情。


.pushmenu {

  background: #444;

  text-align: center;

  font-family: Tahoma, Geneva, sans-serif;

  width: 300px;

  height: 100%;

  top: 0;

  z-index: 1000;

  position: fixed;

    overflow: hidden;

}


.pushmenu_inner{

    width: 100%;

    height: 99%;

    overflow: auto;

    padding-right: 15px;

}


查看完整回答
反對 回復(fù) 2021-12-02
?
拉丁的傳說

TA貢獻(xiàn)1789條經(jīng)驗(yàn) 獲得超8個(gè)贊

有一個(gè)名為 overflow 的 CSS 屬性，它控制超出可用空間時(shí)的內(nèi)容。將其設(shè)置為自動(dòng)會自動(dòng)添加一個(gè)滾動(dòng)條。


pushmenu {

  background: #444;

  text-align: center;

  font-family: Tahoma, Geneva, sans-serif;

  width: 300px;

  height: 100%;

  top: 0;

  z-index: 1000;

  position: fixed;

  overflow: auto;


}


查看完整回答
反對 回復(fù) 2021-12-02
?
倚天杖

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊

您可以使用此代碼


<!doctype html>

<html>


<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>demo</title>

  <style type="text/css">

    body {

      margin: 0;

    }

    

    .pushmenu {

      background: #444;

      text-align: center;

      font-family: Tahoma, Geneva, sans-serif;

      width: 300px;

      height: 100%;

      top: 0;

      z-index: 1000;

      position: fixed;

      overflow: hidden;

    }

    

    .main {

      width: 100%;

      height: 100%;

      overflow: auto;

    }

    

    .pushmenu h3 {

      color: #f1f1f1;

      font-size: 1.3em;

      font-weight: 400;

      padding: 15px 25px;

      margin: 0;

      background: #333;

      height: 16px;

    }

    

    .links {

      list-style-type: none;

      padding: 0;

      margin: 0 0 0 25%;

      width: 50%;

    }

    

    .links li {

      margin-top: 30px;

    }

    

    .links li a {

      position: relative;

      display: block;

      color: #f1f1f1;

      font-size: 1.3em;

      font-weight: 400;

      text-decoration: none;

      padding: 14px;

    }

    

    .links li a:after {

      content: '';

      display: block;

      position: absolute;

      left: 20px;

      bottom: -5px;

      width: 0;

      height: 4px;

      background-color: #f1f1f1;

      -webkit-transition: width 0.3s ease;

      -moz-transition: width 0.3s ease;

      transition: width 0.3s ease;

    }

    

    .links li a:hover:after {

      width: 70%;

    }

    

    .links li a:active {

      color: #dbdbdb;

    }

    

    .pushmenu-left {

      left: -150px;

    }

    

    .pushmenu-left.pushmenu-open {

      left: 0;

    }

    

    .pushmenu-push {

      overflow-x: hidden;

      position: relative;

      left: 0;

    }

    

    .pushmenu-push-toright {

      left: 300px;

    }

    

    .pushmenu,

    .pushmenu-push {

      -webkit-transition: all 0.5s ease;

      -moz-transition: all 0.5s ease;

      transition: all 0.5s ease;

    }

  </style>

</head>


<body class="pushmenu-push">

  <nav class="pushmenu pushmenu-left main">

    <ul class="links">

      <li><a href="index">Home</a></li>

      <li><a href="#">About Us</a></li>

      <li><a href="#">Missions</a></li>

      <li><a href="#">Partners</a></li>

      <li><a href="#">Events</a></li>

      <li><a href="#">Contact</a></li>

      <li><a href="#">Give</a></li>

      <li><a href="index">Home</a></li>

      <li><a href="#">About Us</a></li>

      <li><a href="#">Missions</a></li>

      <li><a href="#">Partners</a></li>

      <li><a href="#">Events</a></li>

      <li><a href="#">Contact</a></li>

      <li><a href="#">Give</a></li>

    </ul>

  </nav>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <script type="text/javascript">

    $(document).ready(function() {

      $menuLeft = $('.pushmenu-left');

      $nav_list = $('#nav_list');

      $nav_list.click(function() {

        $(this).toggleClass('active');

        $('.pushmenu-push').toggleClass('pushmenu-push-toright');

        $menuLeft.toggleClass('pushmenu-open');

      });

    });

  </script>

</body>


</html>


查看完整回答
反對 回復(fù) 2021-12-02
  • 3 回答
  • 0 關(guān)注
  • 175 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號