PC端内容横向滚动效果

最新推荐文章于 2024-07-20 13:23:34 发布
最新推荐文章于 2024-07-20 13:23:34 发布
阅读量1w 收藏 10
点赞数 4
分类专栏： 前端 文章标签： css 前端 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39197319/article/details/84956749
版权
本文介绍了如何使用CSS在PC端实现内容的横向滚动效果，无需JavaScript。关键在于设置CSS样式，通过创建一个包裹块并调整内部元素的display属性为inline-table来实现水平排列。
摘要由CSDN通过智能技术生成

目录

前言

想要实现的效果如下
在这里插入图片描述

具体操作

思路

首先要有一个大的div，里面包裹的内容可以左右移动。开始以为是很复杂的操作，查了相关资料发现很简单，只需要操作css，都不需要自己写js

html代码

class="scrollBox"的块就是最外层的包裹块；class="blockDiv"的块是通过v-for循环产生多个

<!--代码进行了省略处理-->
<div v-if="showBlock" class
最低0.47元/天 解锁文章
孤身前往的未知
关注
专栏目录
web前端仿手机左右滑动
08-25
web前端仿手机左右滑动，这个功能在手机上用的很多，但是现在很多网站都在用这个功能，所以我上传了这个例子
实现Vue 电脑端 PC端 鼠标拖拽横向移动 & 鼠标事件mousedown mouseup mousemove和单击事件click冲突问题& 盒模型冲撞取消拖拽状态问题
TVM的博客
07-30 5120
<1>.已实现功能 1.PC端Vue项目(或html)实现鼠标左右拖拽盒子滑动 2.同一盒子上鼠标移入移出事件和单击事件click冲突问题 3.子盒子移动,如何让边界不超出父盒子边界? 注意: 本文主要涉及到PC端鼠标横向拖拽问题的解决,移动端的解决方案很多,请详见其他文章,不在这里赘述. <2>.代码及原理 需求描述:横向有一个菜单栏, 菜单tab过多,让他实现左右可以拖拽滑动 我们设置一个大盒子grand, 然后是父盒子parent和子盒子child. 其中gran
14-PC端点击横向滚动
最新发布
weixin_46675693的博客
07-20 369
可知，滚动条是在可视容器中滚动，则滚动条的区域长度即为可视容器的宽度（clientWidth），而商品列的实际宽度（scrollWidth）为商品展示宽度（包括元素宽度+margin）*商品个数，则滚动条的可滚动距离为商品列实际宽度-可视容器的宽度，滚动条移动的距离与内容滚动的距离之间的比率是恒定的。前提条件：做一个商品列表，不换行，超出长度是横向滚动，但不是通过滚动条，是点击左右按钮滚动商品列表。1、当商品列表为初始状态时，左按钮不隐藏，右按钮展示，左右按钮表示商品的上一个或下一个。
js 实现pc端鼠标拖动触发横向滚动条的滚动（隐藏的滚动条）
PrimaryColor
10-12 1万+
我们都知道，pc端的横向滚动条只能点击滚动条进行左右拖动，不能像移动端那样，直接在空白区域就可以左右拖动。 在我的项目中，因为需求是将整个网站的滚动条全部隐藏了，所以就不能点击滚动条来拖动。 效果图1： 效果图2： 效果图1代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=..
vue项目pc端实现横向拖动
泥鸽鸽的博客
10-17 1613
vue实现pc端横向无滚动条滚动效果
PC端实现左右两侧导航双向滚动
u010328533的博客
10-10 858
滚动右侧区域，模块标题到达顶部，对应左侧菜单会高亮。点击左侧导航菜单，右侧对应的模块会滚动到顶部位置。
CSS - 实现横向滚动（横向滚动布局）
热门推荐
王佳斌
08-24 3万+
CSS - 实现横向滚动（横向滚动布局），css横向滚动布局，css实现元素横向滚动的方法css中如何实现横向滚动布局，纯CSS实现横向滚动条，横向不间断滚动DIV CSS代码，纯CSS3横向滚动条实现。
PC端横向滚动视觉差效果
03-26
在本案例中，我们关注的是"PC端横向滚动视觉差效果"，这是一种在个人电脑平台上通过鼠标滚轮实现的特殊滚动效果，能够让用户在水平方向上浏览内容，同时产生视觉上的立体感。 实现这种效果通常涉及到以下几个关键...
vue 实现滚动到底部翻页效果(pc端)
10-16
在Vue.js中，实现PC端滚动到底部自动加载更多数据（翻页效果）是一种常见的优化用户体验的方法，尤其在处理大量列表数据时。这种效果通常被称为“无限滚动”或“滚动加载”。以下是一个详细的实现步骤： 1. **HTML...
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
01-19
PC 端对兼容性的要求相对来说要高一点，所有可以换一种方法，大致思路就是在内容div外面包一个父容器div，设置 overflow: hidden，内容div设置 display-x: hidden; display-y: auto; 最后设置父容器div的宽度小于...
JavaScript实现PC端横向轮播图
11-21
在JavaScript实现PC端横向轮播图的过程中，我们通常会遵循一系列步骤来确保功能的完整性和用户体验。以下是对这些步骤的详细解释： 1. **初始化图片移动**： - 首先，我们需要设置每次点击按钮时图片移动的距离，...
PC用横向图文列表展示
05-03
PC端专用横向图文列表展示效果，本人基于jQuery开发制作的前端常用效果插件
图片横向动画滚动
03-13
图片的横向滚动,自己从右向左运动,光标移动后停止
pc端整屏滚动
04-20
jquery特效，鼠标滚动整屏滚动；
js 实现pc端鼠标横向拖动滚动
oneyJiang
12-13 763
js实现横向拖动滑动
页面内容横向滚动
yinmanman_dev的博客
03-13 357
页面内容横向滚动
手机适配，在真机上适配正常，在pc端适配出现横向滚动条
浮游的博客
04-15 890
如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。
使用鼠标拖拽div，实现横向滚动
ROVAST的专栏
04-09 1万+
效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.bootcss.co
html盒子横向滚动
MrHao_的博客
10-10 2760
父盒子css: width: 100%; overflow: hidden; overflow-x: scroll; white-space: nowrap; //使用这个后，子盒子文字会在一行显示 子盒子css： display: inline-block; white-space: normal;//子盒子加上这个就可以内容就可以自动跨行了 ...
Vue与iscroll.js结合解决PC端横向滚动
在开发Web应用时，特别是在Vue.js框架下，有时我们需要处理PC端的滚动效果，尤其是当内容区域超过屏幕宽度或高度，需要横向或纵向滚动时。`iscroll.js`是一个轻量级的JavaScript库，专门用于处理触摸滚动和滚动动画...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值