我使用 materialize CSS 框架,我有一个宽度为 100vw 的移动屏幕自定义搜索栏,如果没有滚动条,它工作得很好,当滚动条出现时,我的搜索栏被推到左边,如下所示。
没有滚动条
带滚动条
宽度 100%
我是说下图这样
stackoverflow上的searchbar可以调整屏幕的宽度
导航栏
<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;
}
}
最佳答案
您有一个宽度为 100vw 的移动屏幕自定义搜索栏...
尝试使用 width: 100%;
100vw 取视口(viewport)宽度,包括滚动条
如果我没记错的话,你也可以使用 width: calc(100vw - 13px)
滚动条在一般情况下是 13px,但这是一种 hacky 方式。
编辑:
您知道移动设备实际上不会显示滚动条,对吧。
如果您只是在调整大小的浏览器上进行测试,并且您不关心它,因为这样做的人不多,您可以忽略它。
如果您想查看真正的移动行为,请使用 ngrok在线访问本地网站。
关于html - 如何防止滚动条插入元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52661554/