面向百度编程cv 2021-12-22 14:23 采纳率: 33.3%
浏览 165

vue 横 向 滚 动 隐 藏 滚 动 条

问题遇到的现象和发生背景

在vue项目用css 写一个横向超出滚动并隐藏滚动条

问题相关代码,请勿粘贴截图

.element, .outer-container {
    width: 200px;
    height: 100px;
  }

  .outer-container {
    border: 1px solid purple;
    position: relative;
    overflow: hidden;
  }

  .inner-container {
    position: absolute;
    bottom: 0;
    white-space: nowrap;
    overflow-x:auto;
    overflow-y: hidden;
    text-overflow:ellipsis
  }

  .inner-container::-webkit-scrollbar {
    display: none;
  }
<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Integer vehicula quam nibh, eu tristique tellus dignissim
      quis. Integer condimentum ultrices elit ut mattis.
      Praesent rhoncus tortor metus, nec pellentesque enim
      mattis nec. Nulla vitae turpis ut dui consectetur
      pellentesque quis vel est. Curabitur rutrum, mauris ut
      mollis lobortis, sem est congue lectus, ut sodales nunc
      leo a libero. Cras quis sapien in mi fringilla tempus
      condimentum quis velit. Aliquam id aliquam arcu. Morbi
      tristique aliquam rutrum. Duis tincidunt, orci suscipit
      cursus molestie, purus nisi pharetra dui, tempor
      dignissim felis turpis in mi. Vivamus ullamcorper arcu
      sit amet mauris egestas egestas. Vestibulum turpis neque,
      condimentum a tincidunt quis, molestie vel justo. Sed
      molestie nunc dapibus arcu feugiat, ut sollicitudin metus
      sagittis. Aliquam a volutpat sem. Quisque id magna
      ultrices, lobortis dui eget, pretium libero. Curabitur
      aliquam in ante eu ultricies.

      Quisque vitae tincidunt purus. Vivamus feugiat bibendum
      erat, nec interdum urna porta sed. Nunc lobortis neque
      orci, ut suscipit nisl congue feugiat. Vivamus feugiat
      tellus quis cursus sollicitudin. Curabitur dolor massa,
      dictum ut ipsum in, porttitor pellentesque ante. Aenean
      egestas cursus tempor. Maecenas semper tortor sit amet
      egestas cursus. Mauris porttitor quis nisi ut tincidunt.
      Curabitur adipiscing eleifend nibh. Praesent mauris leo,
      consequat vitae orci eget, vestibulum bibendum nisi.
      Aliquam tempus diam ut tortor cursus, eget sodales augue
      adipiscing. Nulla at dignissim libero.
    </div>
  </div>
</div>
运行结果及报错内容

在谷歌浏览器运行,滚动条隐藏了但是鼠标滚动无法控制滚动

我的解答思路和尝试过的方法
我想要达到的结果

怎么做才能横向滚动隐藏滚动条滚轮控制

  • 写回答

1条回答 默认 最新

  • 焦焦焦iii 2021-12-22 14:47
    关注

    overflow-x:hidden

    评论

报告相同问题?

问题事件

  • 修改了问题 12月22日
  • 创建了问题 12月22日

悬赏问题

  • ¥30 STM32 INMP441无法读取数据
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上,请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面,不要作在线的,要离线状态。
  • ¥15 各位 帮我看看如何写代码,打出来的图形要和如下图呈现的一样,急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境