2019-06-23 10:47:52 sym134 阅读数 1758
  • 细说CSS(CSS+CSS3)

    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。

    6607 人正在学习 去看看 郭宏志

 

overflow-x: scroll;  // 设置滚动
-webkit-overflow-scrolling: touch; //让滚动更流畅,其实就是滚动有延缓,不设置只要手指离开就立刻停止,感觉体验商是一种不流畅

上面只要加了 -webkit-overflow-scrolling: touch 就会出现滚动条,如果只是PC或安卓那恭喜你添加下面代码完美解决

/*HTML5 元素超出部分滚动, 并隐藏滚动条*/
    ::-webkit-scrollbar {
        display: none;
    }

-webkit-scrollbar 是可以自定义样式的,但在ios就是个废柴
如何设置看这里https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar

 

ios解决办法有两种

1、设置高度来隐藏

在滚动条外围再次包裹一层 overflow-x: hidden; 设置高度比内层小一丢丢就行了!代码就不上了……

2、设置边距来隐藏,因为我的 li 都有阴影 所以选择这种方式,要不然阴影也被整没来!

ul{
padding-bottom: 40px;
margin-bottom: -10px;
}

 

 

2019-06-21 17:32:12 gaoqiang1112 阅读数 62
  • 细说CSS(CSS+CSS3)

    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。

    6607 人正在学习 去看看 郭宏志

1 隐藏掉滚动条

.diTuPage::-webkit-scrollbar { width: 0 !important }
.diTuPage { -ms-overflow-style: none; }
.diTuPage { overflow: -moz-scrollbars-none; }

2 ios中长按不选中页面内容

*{
  -webkit-touch-callout:none;  /*系统默认菜单被禁用*/
  -webkit-user-select:none; /*webkit浏览器*/
  -khtml-user-select:none; /*早期浏览器*/
  -moz-user-select:none;/*火狐*/
  -ms-user-select:none; /*IE10*/
  user-select:none;
}
input {
  -webkit-user-select:auto; /*webkit浏览器*/
}

如果你觉得我帮到你了,买个肥宅快乐水,怎么样?哈哈哈哈哈哈

2018-06-30 11:02:58 qq_40292654 阅读数 2641
  • 细说CSS(CSS+CSS3)

    本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。

    6607 人正在学习 去看看 郭宏志

在移动端页面显示时,为了美观,我们一般会把overflow-x,overflow-y滚动条隐藏起来。

.element{
   overflow-x:scroll;
   overflow-y:auto;
}

温馨提示:一般在用到overflow-x,overflow-y的任意一个时,都建议把另外一个一起写上

隐藏滚动条一般主要是用到:

.element::-webkit-scrollbar {display:none}

使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。所以一般不推荐使用。

解决滚动条在ios系统上不流畅的问题:

.element{
    overflow-x:scroll;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;//允许独立的滚动区域和触摸回弹
}

这样就可以啦。


没有更多推荐了,返回首页