css 左右滚动-在CSS中左右滚动

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

CSS中的左右滚动是一个常见的功能，常用于网页的图片展示、新闻滚动、商品推荐等场景。 我们来看看如何实现。

首先，我们需要设置需要滚动的元素的长度，并设置overflow-x:scroll; 为其父元素添加属性来实现垂直滚动。 如下：

.scroll{
width: 300px;
white-space: nowrap; /* 防止换行 */
overflow-x: scroll;
}
.scroll img{
width: 100px;
height: 100px;
display: inline-block; /* 将图片变成行内元素 */
}

上面的代码实现了一个长度为300px、可以垂直滚动的图片显示。 我们发现css 左右滚动，为了实现垂直滚动，需要将图片做成内联元素，但由于图片的高度不确定css 左右滚动，所以我们只设置长度，高度根据比例自适应。

如果我们需要支持键盘滚动，我们可以添加overflow-x:auto; CSS 属性：

.scroll{
width: 300px;
white-space: nowrap; /* 防止换行 */
overflow-x: auto;
}

其实我们也可以通过JavaScript来动态控制滚动。 设置左右方向键，并绑定风暴：

左
右
.scroll{
width: 300px;
white-space: nowrap; /* 防止换行 */
overflow-x: scroll;
}
.scroll img{
width: 100px;
height: 100px;
display: inline-block; /* 将图片变成行内元素 */
}
.left,.right{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 999;
cursor: pointer;
}
.left{
left: 0;
}
.right{
right: 0;
}
.left:hover,.right:hover{
color: red;
}
// JS部分
const scrollBox = document.querySelector('.scroll');
const leftBtn = document.querySelector('.left');
const rightBtn = document.querySelector('.right');
leftBtn.addEventListener('click', () =>{
scrollBox.scrollBy({
left: -100,
behavior: 'smooth'
});
});
rightBtn.addEventListener('click', () =>{
scrollBox.scrollBy({
left: 100,
behavior: 'smooth'
});
});

上面的代码实现了左右箭头的绑定，每次点击都连接100px的距离。

事实上，左右滚动是CSS中的一个常见功能。 通过比例长度和行内元素的特性，我们可以轻松实现垂直滚动的效果。