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

效果:在这里插入图片描述
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会有回弹效果,但是,此时对于滚动条设置的所有样式就会失效,浏览器会使用系统默认的样式以及默认滚动条不显示

猜你喜欢

转载自blog.csdn.net/wcy7916/article/details/88998072
今日推荐