移动端 初始状态默认显示滚动条(告诉用户此区域是可以上下滚动查看的)

9 篇文章 0 订阅
1 篇文章 0 订阅

效果:在这里插入图片描述
html:

      <div class="readDry">
        <div class="scrollDry">Please select one word for each blank from the word bank. You may not use any of t Please select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of tPlease select one word for each blank from the word bank. You may not use any of t</div>
      </div>

css:

.readDry .scrollDry {
     height:2.731rem;
    overflow-y: scroll;
    background: #F7F8FB;
    border-radius: 0.171rem;
    font-size: 0.273rem;
    color: #525151;
    padding:0.256rem;
    /*debug ios 默认不显示滚动条 */
    -webkit-overflow-scrolling: auto !important;
}
/* 默认显示滚动条 */
.readDry .scrollDry::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
}
.readDry .scrollDry::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color:#D8D8D8;
}

-webkit-overflow-scrolling: touch;属性让ios默认不显示滚动条
-webkit-overflow-scrolling属性是定义是否使用回弹效果;默认值是auto;当-webkit-overflow-scrolling设置为touch时,ios会有回弹效果,但是,此时对于滚动条设置的所有样式就会失效,浏览器会使用系统默认的样式以及默认滚动条不显示

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值