触摸滑动 <ul> 列表 @media

Posted 2023-05-08

【中文标题】触摸滑动 <ul> 列表 @media

【英文标题】：touch slide a <ul> list @media

【发布时间】：2020-11-26 20:39:41

【问题描述】：

当屏幕最小化时，一些单词会离开屏幕，我需要一种方法让移动用户滑动<ul><li></li></ul> 以查看列表中的所有单词

<ul id="portfolio-flters" class="d-flex justify-content-end" data-aos="fade-up">
  <li data-filter="*" class="filter-active">All</li>
  <li data-filter=".filter-hotel">Hotel</li>
  <li data-filter=".filter-bed">Lodging</li>
  <li data-filter=".filter-foo">Breakfast</li>
  <li data-filter=".filter-conf">Conferences</li>
</ul>

【参考方案1】：

这应该可以解决问题！

ul 
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  overflow: scroll;
  // This is where the magic happens
  -webkit-overflow-scrolling: touch;

【讨论】：

谢谢，这很好，但我最终减少了左右边距和字体大小，谢谢