如何实现homePagePosters在非触屏设备可滚动且隐藏滚动条？

要实现非触屏设备上.homePagePosters可滚动且无滚动条，同时解决图片拖拽问题，你可以按以下方式修改代码：

核心修改方向： #

• 覆盖多浏览器的滚动条隐藏规则
• 从CSS和HTML层面双重阻止图片拖拽
• 优化桌面端滚动的交互提示

修改后的完整代码： #

<style>
  .homePagePosters {
    white-space: nowrap;
    overflow-x: auto;
    margin-left: 8px;
    margin-right: 8px;
    /* 适配IE/Edge、Firefox的滚动条隐藏 */
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* 桌面端滚动提示光标 */
    cursor: grab;
  }

  .homePagePosters::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera 滚动条隐藏 */
  }

  .homePagePosters--img img {
    display: inline-block;
    height: auto;
    /* 禁止图片选中与拖拽 */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-drag: none;
    -webkit-user-drag: none;
  }

  /* 滚动时的光标状态 */
  .homePagePosters:active {
    cursor: grabbing;
  }
</style>

<div class='homePagePosters'>
  <div class="homePagePosters--img">
    <img src='https://picsum.photos/260/190?random=1' alt='1' draggable="false">
    <img src='https://picsum.photos/260/190?random=2' alt='2' draggable="false">
    <img src='https://picsum.photos/260/190?random=3' alt='3' draggable="false">
    <img src='https://picsum.photos/260/190?random=4' alt='4' draggable="false">
    <img src='https://picsum.photos/260/190?random=5' alt='5' draggable="false">
    <img src='https://picsum.photos/260/190?random=6' alt='6' draggable="false">
    <img src='https://picsum.photos/260/190?random=7' alt='7' draggable="false">
    <img src='https://picsum.photos/260/190?random=8' alt='8' draggable="false">
    <img src='https://picsum.photos/260/190?random=9' alt='9' draggable="false">
    <img src='https://picsum.photos/260/190?random=10' alt='10' draggable="false">
  </div>
</div>

关键细节说明： #

1. 滚动条隐藏：
   • 补充-ms-overflow-style: none适配IE/Edge，scrollbar-width: none适配Firefox，加上原有的webkit内核规则，实现全浏览器无滚动条效果
2. 阻止图片拖拽：
   • CSS通过user-select系列属性禁止图片被选中，user-drag系列属性直接禁用拖拽行为
   • HTML层面给每个图片添加draggable="false"，彻底杜绝拖拽触发
3. 交互体验优化：
   • 光标设置为grab提示可滚动，滚动时切换为grabbing，让用户明确交互状态

内容的提问来源于stack exchange，提问作者Forever Edits