公告列表
公告列表
收藏
回答

PC端小程序滚动条问题

框架类型 问题类型 操作系统版本 手机型号 微信版本
小程序 Bug 所有版本 微信电脑端 最新 
1、小程序通过webview加载H5页面。H5页面设置x轴滚动条通过如下代码给外层div添加：
 $(this).parent().css("width", "1200px");
 $(this).parent().css("overflow-x", "auto");
2、PC端打开小程序，通过WebView访问的页面。表格列若过多;会出现x轴滚动条，但PC端小程序不会出现（且无法进行滚动）。
手机打开小程序、电脑/手机直接访问对应网页，均可以。对比如图

WebView 、 overflow-x
最后一次编辑于  2021-07-17
回答关注问题邀请回答
收藏

2 个回答

  • 社区技术运营专员--阳光
    社区技术运营专员--阳光
    2021-07-18

    你好，提供下复现链接

    2021-07-18
    有用
    回复 2
    • if
      if
      2021-07-19
      谢谢回复，已发现问题，解决了
      2021-07-19
      赞 1
      回复
    • 方梁康
      方梁康
      2022-09-06回复if
      实测有效!
      2022-09-06
      赞
      回复
  • if
    if
    2021-07-19

    问题原因应该是滚动条对PC微信版的内置浏览器兼容问题

    解决方法重绘滚动条样式。具体代码如下：

    /** 手动设置滚动条样式 ** start ** overFlowDiv为设置滚动条溢出的DIV类名：**/
    .overFlowDiv::-webkit-scrollbar-track-piece {
        background-color: #f1f1f1;
        border-left: 1px solid rgba(0, 0, 0, 0);
    }
    .overFlowDiv::-webkit-scrollbar {
        width: 5px;
        height: 13px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .overFlowDiv::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
        background-clip: padding-box;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        min-height: 28px;
    }
    .overFlowDiv::-webkit-scrollbar-thumb:hover {
        background-color: #787878;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    /** 手动设置滚动条样式 ** end **/
    2021-07-19
    有用 3
    回复 1
    • 方梁康
      方梁康
      2022-09-06
      实测有效!
      2022-09-06
      赞
      回复
请 登录 后发表内容
相关问题
相关文档