实现可控制左右方向的无缝滚动效果，可以通过以下步骤实现：
首先，我们需要创建一个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样式来控制滚动效果。可以采用如下的样式：
.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
以上就是实现可控制左右方向的无缝滚动效果的完整攻略，希望对你有所帮助。
本文链接：http://task.lmcjl.com/news/8490.html