js实现可控制左右方向的无缝滚动效果

实现可控制左右方向的无缝滚动效果，可以通过以下步骤实现：

步骤一：创建HTML结构

首先，我们需要创建一个HTML结构来支持该滚动效果。可以采用如下的结构：

<div class="scroll-container">
  <div class="scroll-items">
    <div class="scroll-item">Item 1</div>
    <div class="scroll-item">Item 2</div>
    <div class="scroll-item">Item 3</div>
    <div class="scroll-item">Item 4</div>
    <div class="scroll-item">Item 5</div>
  </div>
</div>

其中，.scroll-container是整个滚动容器的包裹层；.scroll-items是实际的内容容器，用于包含所有滚动项；.scroll-item是每一个滚动项。

步骤二：添加CSS样式

接下来，我们需要添加CSS样式来控制滚动效果。可以采用如下的样式：

.scroll-container {
  overflow-x: hidden;
}

.scroll-items {
  display: flex;
  flex-wrap: nowrap;
  transition: transform .3s ease-in-out;
}

.scroll-item {
  padding: 10px;
  margin: 0 10px;
  background-color: #ddd;
  min-width: 100px;
}

其中，.scroll-container设置为隐藏溢出部分，.scroll-items设置为flex布局，nowrap表示不换行，transition表示滚动时使用动画效果；.scroll-item表示每个滚动项，这里仅仅是一个简单的样式示例，实际项目中可以自定义样式。

步骤三：实现滚动效果

最后，我们需要通过JavaScript代码实现滚动效果。可以采用如下的代码：

const container = document.querySelector('.scroll-container');
const items = document.querySelector('.scroll-items');
const item = document.querySelectorAll('.scroll-item');
const itemCount = item.length;
const itemWidth = item[0].clientWidth;

let currentIndex = 0;

container.addEventListener('wheel', (e) => {
  e.preventDefault();

  const delta = e.deltaY;
  const direction = delta > 0 ? 1 : -1;
  currentIndex = (currentIndex - direction + itemCount) % itemCount;

  items.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
});

首先，我们获取到滚动容器、内容容器、滚动项以及一些参数。然后，监听滚轮事件，并根据滚轮滚动方向和当前滚动位置计算出要滚动到的新位置。最后，通过transform属性来控制滚动项的位置。

示例1：Codepen动态展示：https://codepen.io/lyneee/pen/ZEBjBOG

示例2：JSBin动态展示：https://jsbin.com/vibucaveza/2/edit?html,css,js,output

以上就是实现可控制左右方向的无缝滚动效果的完整攻略，希望对你有所帮助。