移动端显示滚动条以及滚动条的监听事件

最新推荐文章于 2024-05-30 11:51:01 发布

笨笨的幸福1230

最新推荐文章于 2024-05-30 11:51:01 发布

阅读量2.6k

点赞数

文章标签： html css jquery

本文链接：https://blog.csdn.net/qq_42709302/article/details/108420271

版权

本文介绍了如何在移动端显示滚动条，通过添加特定CSS类名实现，并利用jQuery监听滚动事件，提供了一种处理移动端滚动条事件的方法。

摘要由CSDN通过智能技术生成

1、移动端显示滚动条

在移动端滚动条默认会隐藏，如何显示呢，需要添加以下代码了。并且需要给body或者外层盒子添加 rows 类名，这样滚动条就可以显示出来了

.rows {
/*     	 	height: 500px; */
/*      	overflow: hidden; */
    	overflow-y: scroll;
  }
  .rows::-webkit-scrollbar-track-piece {
   	 background-color: rgba(0, 0, 0, 0);
   	 border-left: 1px solid rgba(0, 0, 0, 0);
  }
  .rows::-webkit-scrollbar {
       width: 15px;
   	height: 2px;
  		-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
  }
  .rows::-webkit-scrollbar-thumb {
    	background-color: rgba(0, 0, 0, 0.5);
    	background-clip: padding-box;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	min-height: 10px;
  }
  .rows::-webkit-scrollbar-thumb:hover {
    	background-color: rgba(0, 0, 0, 0.5);
   		-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
  }

<body   class="rows">

最低0.47元/天解锁文章

笨笨的幸福1230

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
移动端显示滚动条以及滚动条的监听事件

1、移动端显示滚动条在移动端滚动条默认会隐藏，如何显示呢，需要添加以下代码了。并且需要给body或者外层盒子添加 rows 类名，这样滚动条就可以显示出来了.rows {/* height: 500px; *//* overflow: hidden; */ overflow-y: scroll; } .rows::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0
复制链接

扫一扫