前言：
现时同学们对“css禁止滑动”大体比较关怀，大家都想要了解一些“css禁止滑动”的相关资讯。那么小编也在网摘上搜集了一些有关“css禁止滑动””的相关资讯，希望各位老铁们能喜欢，小伙伴们快快来了解一下吧！1.移动端滑动卡顿的问题 在滚动模块：-webkit-overflow-scrolling:touch;
2.不能滚动 touch-action: none;
3. 如何修改UI框架嵌套很深的值? 在修改的值前面价格 /deep/
eg
/deep/ [class*=van-hairline]::after{
border:none!important;
}
4. 通过this.$refs.viceNavTopActive.style.top 这样更改样式值 必须添加px值 才可以生效，否则数值无效
5. div宽度未知，点击选中项，添加border，出现其他的div被挤走
处理方式：把默认的div加上一个border 设置为白色透明就可以不被挤走
6. ios 安全高度 微信没有jsBridge的情况下使用
padding: constant(safe-area-inset-top) constant(safe-area-inset-right)
constant(safe-area-inset-bottom) constant(safe-area-inset-left);
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
7 1px问题
第一种方案
.border-1px{
border-radius: .16rem;
border: none;
position: relative;
}
.border-1px:before {
content: "";
position: absolute;
top: 0;
left: 0;
border: 1px solid #e5e5e5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
border-radius: 0.16rem;
}
.border-bt,.border-bb{
position: relative;
}
//border-top: 1px
.border-bt::before {
content: ' ';
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-top: 1px solid #e5e5e5;
transform-origin: 0 0;
transform: scaleY(0.5);
z-index: 201;
}
第二种方案
有赞vant
van-hairline--bottom 添加这个类就可以
8.宽度不固定-------左右滚动
<div class="u-like" v-if="list.length">
<img class="like-title" src="" alt="没有图片">
<div class="like-list">
<div class="list-item" v-for="(item,index) in list" :key="index" @click="() => toJumpRecommend()">
<img v-lazy="item.g_img" alt="没有图片">
<div class="mt-20 u-title" style=""><div>{{11}}</div></div>
<div class="item-price">
<span>￥{{}}</span>
<span style="color:#999999">x12期</span>
</div>
</div>
</div>
</div>
.u-like {
text-align: center;
padding: 32px 20px 0;
background: #fff;
min-height: 486px;
.like-title {
width: 214px;
height: 36px;
}
.like-list {
margin-top: 30px;
text-align: left;
clear: both;
content: '';
box-sizing: content-box;
padding: 0 20px 30px;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
display: flex;
.list-item {
float: left;
width: 240px;
box-sizing: border-box;
text-align: center;
img {
width: 240px;
height: 240px;
}
.item-price {
width: 100%;
margin-top:8px;
span:first-child {
color: #ed145b;
font-size: 28px;
}
span:nth-child(2) {
font-size: 20px;
color: #999;
}
}
}
.list-item:nth-child(2n-1) {
margin-right: 20px;
}
.u-title {
display: flex;
justify-content:center;
align-items:center;
color: #000;
font-size: 24px;
font-weight: 400;
height:64px;
line-height: 32px;
@include text-overflow(2);
}
}
}
.u-like:after {
content: '\20';
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
}
9.display:inline-block元素之间空隙的产生原因和解决办法
1.margin-left：-3px
2.父元素 font-size：0px
10左右两侧自适应
<!-- html -->
<div class="main">
<div class="left" ref="left">
<p>111111111111111111111111111111111111111111111</p>
<p>111111</p>
<p>111111111111111111111111</p>
</div>
<div class="right" ref="right">
<p>222222</p>
<p>2222222222222222222222222222222222222222222222222</p>
<p>222222222222</p>
</div>
</div>
<!-- js -->
onStyle () {
let l = this.$refs.left.getElementsByTagName('p')
let r = this.$refs.right.getElementsByTagName('p')
for (let i = 0; i < l.length; i++) {
let max = Math.max(l[i].clientHeight, r[i].clientHeight) + 'px'
l[i].style.height = max
r[i].style.height = max
}
}
<!-- css -->
.main {
height: 100%;
display: flex;
div {
&:first-of-type {
margin-right: 40px;
}
p {
width: 100%;
word-break: break-all;
border: 2px solid #000000;
margin-bottom: 40px;
box-sizing: border-box;
}
}
}
标签： #css禁止滑动 #constantcss #移动端 css
