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

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日

悬赏问题

  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改
  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法