PHP HTML-滚动条在桌面网站上隐藏，并且无法滚动，但在移动浏览器上可以使用

Question

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

PHP-这段代码是由Parse Server PHP编写的，它从数据库中获取了一些用户（这是一个单独的文件，不在我的index.php页面中）：

// perform query
   $usersArray = $query->find(); 
   if (count($usersArray) != 0) { 
      for ($i = 0;  $i < count($usersArray); $i++) {
         // Parse Obj
         $uObj = $usersArray[$i];

         // avatar
         $avatarImg = $uObj->get($USER_AVATAR);
         // username
         $username = $uObj->get($USER_USERNAME);
?>

         <div class="top-user">
            <div class="text-center" style="width: 130px">
               <a href="user-profile.php?upObjID=<?php echo $uObj->getObjectId() ?>">
                  <div class="top-profile-pic"> 
                     <img src="<?php echo $avatarImg->getURL() ?>">
                  </div><br>
                  <strong style="font-size: 14px"><?php echo $username ?></strong>
               </a>
            </div>
         </div>

         <?php 
      }// ./ For

Javascript-此函数从我的index.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>

CSS-此代码是设计我的#topUsersGrid div：

#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：

因此，如您所见，没有底部滚动条可见，我无法水平滚动该区域以查看其他用户。如果在设备的浏览器中加载相同的索引页，则可以用手指左右滚动该区域。我不知道自己在做什么错，也许是在CSS中，也许是因为代码被PHP回显而不是出现在索引页中。任何帮助将不胜感激。

Answer 1

尝试将其添加到您的CSS：

#topUsersGrid {
overflow-x: scroll;
}

您可能需要给该div最大宽度，例如：

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