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