浏览器在打开下拉列表或单击列表项时摇晃

问题描述

当我单击下拉菜单或将鼠标悬停在下拉列表的元素上时，浏览器窗口会抖动。当我从标记中删除.row和.column类时，抖动效果消失。.在此项目中，我出于大多数目的使用引导程序（包括下拉菜单和网格） 这是标记。

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

#nav-left {
  background-color: #44403b;
  height: 92vh;
  overflow: hidden;

  #navigation {
     padding: 10px;
     width: 100%;
     color: #acb2d4;
     font-size: 18px;
     letter-spacing: 0.5px;
     background-color: #322e2b;
   }

   ul.menu {
    padding: 0;
    margin : 0;
    list-style: none;

     li {
      &:hover {
        background-color: #49423f;
      }
       a {
        text-decoration: none;
        display: block;
        padding: 15px;
        cursor: pointer;
        font-size: 18px;
        color: #acb2d4;
        border-bottom: 1px solid #515151;

         &.parent::after {
           content: "\f107";
           font: normal normal normal 14px/2 FontAwesome;
           float: right;
           margin-right: 8px;
         }
         //collapsed class is overriding the content of parent class,but when we click the collapsed class changes to
         // collapse and then the content of parent is shown
         &.collapsed::after {
          content: "\f105";
         }
       }
     }
  }

    & li ul#sub-menu1 {
      margin:0;
      padding: 0;
      list-style: none;
      & li {
        line-height: 10px;
        &:hover {
          background-color: #48423f;
        }
        a {
          transition: all 0.5s;
        }
      }
    }
    & li ul li a:hover {
    transform:translateX(10px);
    background-color: #322e2b;
    width: 100%;
    overflow: hidden;
  }
}

<div class="row">
  <div class="col-2">
    <nav id="nav-left">
      <div id="navigation"><i class="fa fa-bars"></i> &nbsp; Navigation</div>
      <ul class="menu">
        <li class="active">
          <a href="#"><i class="fa fa-dashboard fw"></i> &nbsp;Dashboard</a>
        </li>
        <li>
          <a data-toggle="collapse"
             href="#sub-menu1"
             role="button"
             aria-expanded="false"
             aria-controls="sub-menu1"
             class="parent collapsed">
            <i class="fa fa-user fw"></i> &nbsp;
            Users
          </a>
          <ul class="collapse" id="sub-menu1">
            <li>
              <a href="#"><i class="fa fa-users text-primary"></i> &nbsp;All                Users</a>
            </li>
            <li>
              <a href="#"><i class="fa fa-plus text-secondary"></i> &nbsp;New                Users</a>
            </li>
            <li>
              <a href="#"><i class="fa fa-dot-circle-o text-success"></i>                   &nbsp;Active Users</a>
            </li>
            <li>
              <a href="#"><i class="fa fa-dot-circle-o text-danger"></i>                       &nbsp;Inactive Users</a>
            </li>
            <li>
              <a href="#"><i class="fa fa-ban"></i> &nbsp;Blocked Users</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#"><i class="fa fa-calendar"></i> &nbsp;Events</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="col-10">
    <div class="row">
      <div class="col-4">
      </div>
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>
    <div class="row">
      <div class="col-4"></div>
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>
    <div class="row">
      <div class="col-4"></div>
      <div class="col-4"></div>
      <div class="col-4"></div>
    </div>
  </div>
</div>

解决方法

是否如此简单，以至于出现了浏览器垂直滚动条？下降率很高吗？ 如果是这样，您可以通过添加CSS规则使垂直浏览器滚动条始终可见

body {
   overflow: scroll;
}

始终添加垂直和水平滚动条 仅将溢出Y用于垂直