html怎么实现左右滚动,css实现左右滑动

css

.minVideoViewBox{

width:100%;

overflow-x: auto;

overflow-y: hidden;

white-space:nowrap;

&::-webkit-scrollbar{// 滚动条整体

background:none;

}

&::-webkit-scrollbar-thumb{//滑块

background: rgba(71, 145, 242,.5);

border-radius: 5px;

}

&::-webkit-scrollbar-track{//轨道

}

&::-webkit-scrollbar-button{//两端按钮

}

&::-webkit-scrollbar-track-piece{//滚动条中间部分

}

}

.miniStreamView{

width:80px;

height:80px;

display: inline-block;

background:pink;

margin:6px;

}

标签:左右,滚动条,width,scrollbar,background,webkit,滑动,css

来源: https://www.cnblogs.com/fqh123/p/12450042.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML并没有提供实现左右滑动的标准方式,但可以通过JavaScript或CSS实现。 一种常用的方式是使用CSS3中的transform和transition属性,具体实现方式与上面的回答类似,只需要将overflow-x属性改为hidden即可。 下面是一个示例代码: ``` <div class="container"> <div class="content">需要滑动的内容1</div> <div class="content">需要滑动的内容2</div> <div class="content">需要滑动的内容3</div> </div> <style> .container { overflow-x: hidden; /* 隐藏水平滚动条 */ white-space: nowrap; /* 设置子元素不换行 */ } .content { display: inline-block; /* 设置子元素为行内块元素 */ width: 100px; /* 设置子元素的宽度 */ height: 100px; /* 设置子元素的高度 */ background-color: #ccc; margin-right: 10px; /* 设置子元素之间的间距 */ transform: translateX(0); /* 设置初始位置为0 */ transition: transform .3s ease-out; /* 设置过渡效果 */ } .content:hover { transform: translateX(50px); /* 鼠标悬停时滑动 */ } </style> ``` 在上面的代码中,我们同样定义了一个容器元素.container,并设置它的overflow-x属性为hidden,这样就可以隐藏水平滚动条。 然后在容器元素中添加了三个需要滑动的内容元素,每个元素的宽度为100px,高度为100px,通过设置display:inline-block属性使它们变成行内块元素,并设置margin-right属性为10px,使它们之间有一定的间距。 接下来通过设置.content元素的transform属性,将它们在水平方向上进行位移。初始位置为0,当鼠标悬停在元素上时,通过:hover伪类选择器将元素向右滑动50px。 最后通过设置transition属性来控制滑动的过渡效果,过渡时间为0.3秒,过渡方式为ease-out。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值