建站资讯

让iPad的Safari页面div显示滚动条的方法

作者:admin 发布时间:2020-07-26
让iPad的Safari页面div显示滚动条的方法 :31来源:威易网作者:小威

在iOS下的Safari电脑浏览器,默认div、列表、textarea、下拉列表中的滚动条是无法显示的。用户往往不清楚什么地方是支持滚动的,所以要强制显示滚动条。


在iOS下的Safari电脑浏览器,默认div、列表、textarea、下拉列表中的滚动条是无法显示的。用户往往不清楚什么地方是支持滚动的,所以要强制显示滚动条。

其实可以用::-webkit-scrollbar伪类来解决这个问题。

先了解一下:

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的滑块
::-webkit-scrollbar-track  滚动条的轨道

Demo效果如图:

 \

代码如下:

!DOCTYPE html
html
head lang= en
  meta charset= UTF-8
  title /title
  style
  .div-ul{
  background: #ccc;
  width: 300px;
  height: 100px;
  overflow-x: auto;
  overflow-y: hidden;
  }

  /* 滚动条整体部分 */
  .div-ul::-webkit-scrollbar{
  width: 12px; /* 纵向滚动条宽度 */
  height: 12px;/* 横向滚动条高度 */
  background-color: #F5F5F5; /* 滚动条整体背景,一般被覆盖着 */
  }
  /* 滚动条里面的滑块 */
  .div-ul::-webkit-scrollbar-thumb{
  border-radius: 10px; /* 滚动条滑块圆角 */
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 滚动条滑块阴影 */
  background-color: #D62929; /* 滚动条滑块颜色 */
  }
  /* 滚动条的轨道(里面装有Thumb) */
  .div-ul::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滚动条轨道阴影 */
  border-radius: 10px; /* 滚动条轨道圆角 */
  background-color: #F5F5F5; /* 滚动条轨道背景 */
  }
  /style
/head
body
div
  ul >   li /li
  li 234 /li
  li 345 /li
  li 456 /li
  li 567 /li
  li 678 /li
  /ul
/div
/body
/html

关键字:Safari滚动条CSS3

收缩