css鼠标横向滚动并且不展示滚动条几种方法

要实现鼠标横向滚动且不显示滚动条，可以使用以下几种方法：

1. 使用CSS的overflow: hidden;属性隐藏滚动条，并通过鼠标事件来控制滚动。

.scroll-container {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
 
.scroll-content {
  display: inline-block;
  white-space: normal;
  cursor: pointer;
}

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 内容 -->
  </div>
</div>

2. 使用JavaScript监听鼠标事件来改变元素的滚动位置。

<div id="scrollable" style="overflow: hidden; white-space: nowrap;">
  <!-- 内容 -->
</div>
 
<button onclick="scrollLeft()">向左滚动</button>
<button onclick="scrollRight()">向右滚动</button>

var scrollable = document.getElementById('scrollable');
var scrollAmount = 10; // 每次滚动的像素数
 
function scrollLeft() {
  scrollable.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
}
 
function scrollRight() {
  scrollable.scrollBy({ left: scrollAmount, behavior: 'smooth' });
}

以上两种方法均可实现横向滚动，但不显示滚动条。第一种方法通过CSS隐藏滚动条，第二种方法通过JavaScript控制滚动。