Question

我使用实体化CSS框架，并且为移动屏幕提供了一个宽度为100vw的自定义搜索栏，如果没有滚动条，它会很好地工作，当滚动条出现时，我的搜索栏会被推到左侧，如下所示。 / p>

无滚动条

带有滚动条

宽度100％

我的意思是，就像下面的图片

stackoverflow上的搜索栏可以调整屏幕的宽度

导航栏

<nav>
  <div class="nav-wrapper">
    <a href="#" data-target="slide-out" class="sidenav-trigger show-on-small">
      <i class="material-icons">menu</i>
    </a>
    <a href="/" class="brand-logo center">
      <img src="images/personal-logo-full.png" height="40">
    </a>
    <div class="searchbar right">
      <form action="#" method="POST" autocomplete="off" class="search-wrapper">
        <div class="search-field" :class="{ active: searchIsActive }">
          <a class="search-icon" @click="openSearch"><i class="material-icons">search</i></a>
          <input type="text" id="search-input" placeholder="Search" class="browser-default search-input" v-model="searchText">
          <a class="close-icon" @click="closeSearch"><i class="material-icons">close</i></a>
        </div>
      </form>
    </div>
  </div>
</nav>

样式

// materialize default
nav .nav-wrapper {
  position: relative;
  height: 100%;
}

// custom
.searchbar {
  position: relative;
  height: 100%;
  background-color: #fff;
  z-index: 1;
}

.search-wrapper, .search-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-field {
  height: 34px;
  width: 40px;
  margin: 0 10px;
  padding: 0 8px;
  border-radius: 5rem;
  overflow: hidden;
  transition: all .2s ease-in-out;
  @media #{$large-and-up} {
    margin: 0;
  }
  &.active {
    width: calc(100vw - 20px);
    background-color: #F5F6F7;
    @media #{$large-and-up} {
      width: 300px;
      margin: 0 15px;
    }
  }
  .search-input {
    width: inherit;
    background-color: transparent;
    margin: 0 8px;
  }
  a {
    color: #333;
    cursor: pointer;
    transition: color .2s;
  }
}

Answer 1

您有一个自定义搜索栏，其移动屏幕的宽度为100vw ...

尝试使用width: 100%;

100vw采用视口宽度，其中包括滚动条

如果我没记错的话，通常情况下，滚动条为13px，也可以使用width: calc(100vw - 13px)，但这是一种不明智的做法。

编辑：

您知道移动设备实际上并未显示滚动条。

如果您只是在调整大小的浏览器上进行测试，而不必担心，因为这样做的人并不多，那么您就可以忘记它。

如果您想查看真正的移动行为，请使用ngrok在线访问本地网站。

如何防止滚动条推动元素？

1 个答案: