как предотвратить прокрутку полосы прокрутки элементов? - PullRequest
Новая
       34

как предотвратить прокрутку полосы прокрутки элементов?

0 голосов
/ 05 октября 2018

Я использую CSS для материализации, и у меня есть пользовательская панель поиска шириной 100vw для экрана мобильного устройства, она хорошо работает, если без полосы прокрутки, когда появляется полоса прокрутки, моя панель поиска сдвигается влево, как показано ниже.

без полосы прокрутки

without scrollbar

с полосой прокрутки

with scrollbar

ширина 100%

Width 100%

Я имею в виду, что этокак на картинке ниже

Панель поиска на стеке позволяет изменять ширину экрана

enter image description here enter image description here

navbar 

<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>

style 

// 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;
  }
}

1 Ответ

0 голосов
/ 05 октября 2018

У вас есть пользовательская строка поиска с шириной 100vw для экрана мобильного телефона ...

Попробуйте использовать width: 100%;

100vw принимает ширину области просмотра, которая включает полосу прокрутки

Также вы можете использовать width: calc(100vw - 13px), если я правильно помню, полоса прокрутки составляет 13 пикселей в общем случае, но это хакерский способ сделать это.

РЕДАКТИРОВАТЬ:

Вы знаетемобильные устройства на самом деле не показывают полосу прокрутки, верно.

Если вы тестируете только браузер с измененным размером, и вас это не волнует, потому что это делают не так много людей, вы можете просто забыть об этом.

Если вы хотите увидеть настоящее мобильное поведение, используйте ngrok для доступа к локальному веб-сайту в Интернете.

...