时间戳

首页 > 解决方案 > 滚动条隐藏在桌面网站上，不滚动，但它适用于移动浏览器

html - 滚动条隐藏在桌面网站上，不滚动，但它适用于移动浏览器

问题描述

我编写了一些代码来显示div带有 HTML 和 CSS 的用户列表，但它不显示底部滚动条，尽管该区域在移动浏览器上水平滚动。

JavaScriptindex.php - 这个函数从我的页面调用上面的代码：

function queryTopUsers() {
        console.log('LAT: ' + latitude + ' -- LNG: ' + longitude);

        $.ajax({
            url:'query-top-users.php',
            data: 'lat=' + latitude + '&lng=' + longitude,
            type: 'GET',
            success:function(data) {
                document.getElementById("topUsersGrid").innerHTML = data;
                console.log(data);
            }, 
            // error
            error: function(xhr, status, error) {
                var errorMessage = xhr.status + ': ' + xhr.statusText;
                swal("Ouch!", errorMessage, "error");
        }});
    }

HTML - 我的index.php页面中有一个简单的自定义 div，其中显示了 PHP 代码回显的代码：

<div id="topUsersGrid">
   <div class="top-user">
         <div class="text-center" style="width: 130px">
            <a href="user-profile.php?upObjID=123">
               <div class="top-profile-pic"> 
                  <img src="{img-link}">
               </div><br>
               <strong style="font-size: 14px">Username</strong>
           </a>
        </div>
     </div>
</div>

CSS - 此代码用于设计我的#topUsersGriddiv：

#topUsersGrid {
  margin: auto;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.top-user {
   width: 45px;
   float: none;
   margin: 0 60px;
   display: inline-block;
   zoom: 1;
}
.top-user a {
   transition: ease .3s;
}
.top-user a:hover {
   text-decoration: none;
   letter-spacing: 1.0px;
   color: #000;
}

.top-profile-pic {
   display: inline-block;
   width: 120px;
   height: 120px;
   overflow:hidden;
   border-radius: 100px;
   border: 3px solid #e1e1e1;
}

.top-profile-pic img {
  height: 100%;
  width: 100%;
  position: relative;
  object-fit: cover;
}


这是桌面浏览器上的结果 - Chrome、Firefox、Safari：

桌面浏览器上的 topUsersGrid

因此，如您所见，没有可见的底部滚动条，我无法水平滚动该区域以查看其他用户。如果我在设备的浏览器上加载相同的索引页面，我可以用手指左右滚动该区域。

我不知道我做错了什么，可能是在 CSS 中，可能是因为代码被 PHP 回显而不是出现在索引页面中。

标签： htmlcss

解决方案

尝试将此添加到您的 CSS 中：

#topUsersGrid {
overflow-x: scroll;
}

您可能需要为该 div 提供最大宽度，例如：

#topUsersGrid {
max-width: 500px;
overflow-x: scroll;
}

推荐阅读