PC端内容横向滚动效果

最新推荐文章于 2024-04-15 11:50:12 发布
最新推荐文章于 2024-04-15 11:50:12 发布
阅读量1w 收藏 10
点赞数 4
分类专栏： 前端 文章标签： css 前端 滚动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39197319/article/details/84956749
版权

目录

前言

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

具体操作

思路

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

html代码

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

<!--代码进行了省略处理-->
<div v-if="showBlock" class=
最低0.47元/天 解锁文章
孤身前往的未知
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue项目pc端实现横向拖动
泥鸽鸽的博客
10-17 1517
vue实现pc端横向无滚动条滚动效果
PC端横向滚动视觉差效果
03-26
PC端通过鼠标滚轮横向滚动页面,可以给元素加上自定义属性,产生视觉差效果
CSS实现移动端横向滚动导航条，PC端也适用
weixin_40228604的博客
01-14 1649
CSS实现移动端横向滚动导航条，PC端也适用功能由来HTMLCSS 功能由来 近期在做一个H5需要一个横向滚动条，查看了一些文档最后还是决定自己写一个，一个可以兼容Mobile、PC的。 HTML <body> <div class="nav"> <a href="#">Nav1</a> <a href="#">Nav2</a> <a href="#">Nav3<
手机适配，在真机上适配正常，在pc端适配出现横向滚动条
最新发布
浮游的博客
04-15 836
如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。
界面无小事(四):来写个滚动选择器吧!
weixin_34194702的博客
07-16 112
界面无小事(一): RecyclerView+CardView了解一下 界面无小事(二): 让RecyclerView展示更多不同视图 界面无小事(三):用RecyclerView + Toolbar做个文件选择器 界面无小事(四):来写个滚动选择器吧! 界面无小事(五):自定义TextView 界面无小事(六):来做个好看得侧拉菜单! 去github看源码 目录 效果图 前言 Paint类...
pc端整屏滚动
04-20
jquery特效，鼠标滚动整屏滚动；
解决pc端横向滚动的容器无法拖动
weixin_43575775的博客
05-13 474
如果是要使用到react的状态数据 推荐react的事件机制，react的事件绑定不会出现 状态不更新的情况(坑)pc端如果出现横向滚动，没有办法拖动容器内容进行横向滚动，特别是横向滚动条隐藏了的时候。就没有办法做到横向滚动。可以监听onWheel滚动事件,在滚动条没有滚动的情况下，监听到滚动，同时可以区分向上滚动，还是向下滚动。react-slick 轮播图 实现起来很简单。使用上面资料的实现发现不太顺滑，不推荐。移动端默认横向是可以拖动的。
轮播图demo左右滑动-pc端-translate
abcquan123的博客
08-28 438
轮播图demo左右滑动-pc端-translate 外部像前面两篇一样，引入了四张图片 1、对比第一篇左右滑动的轮播图，使用translate更简便，效果也很好，但是没有实现节流，连续点击会播放的很快，如果有什么好方法和建议，欢迎提出 2、写的时候遇到了一个问题，百度了很久才解决，就是在播放超出限制，通过一些方法让它快速回到初始位置的时候，要去掉过渡，但是一直没有效果，这里必须自己触发重绘，代码中也标注了，想了解更多重绘与回流的知识，可以访问 https://blog.csdn.net/qq_4236454
js 实现pc端鼠标横向拖动滚动
oneyJiang
12-13 726
js实现横向拖动滑动
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的宽度小于...
PC用横向图文列表展示
05-03
PC端专用横向图文列表展示效果，本人基于jQuery开发制作的前端常用效果插件
图片横向动画滚动
03-13
图片的横向滚动,自己从右向左运动,光标移动后停止
web前端仿手机左右滑动
08-25
web前端仿手机左右滑动，这个功能在手机上用的很多，但是现在很多网站都在用这个功能，所以我上传了这个例子
JavaScript实现PC端横向轮播图
10-15
JavaScript 实现PC端横向轮播图是一种常见的网页交互效果，用于展示多张图片或内容，让用户可以方便地在多个元素间进行浏览。本教程将详细讲解如何使用JavaScript来创建一个功能完善的横向轮播图。 首先，我们需要...
页面内容横向滚动
yinmanman_dev的博客
03-13 292
页面内容横向滚动
PC端实现左右两侧导航双向滚动
u010328533的博客
10-10 807
滚动右侧区域，模块标题到达顶部，对应左侧菜单会高亮。点击左侧导航菜单，右侧对应的模块会滚动到顶部位置。
overflow-x: auto左右滚动只能移动端；overflow-y: scrool；auto*上下pc端也行
weixin_60508127的博客
03-13 1434
div { width: 650px; height: 520px; /* overflow: auto; */ position: relative; margin: auto; overflow: hidden; } body::-webkit-scrollbar { ...
js 实现pc端鼠标拖动触发横向滚动条的滚动（隐藏的滚动条）
热门推荐
PrimaryColor
10-12 1万+
我们都知道，pc端的横向滚动条只能点击滚动条进行左右拖动，不能像移动端那样，直接在空白区域就可以左右拖动。 在我的项目中，因为需求是将整个网站的滚动条全部隐藏了，所以就不能点击滚动条来拖动。 效果图1： 效果图2： 效果图1代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=..
pc端 横向滑动效果 切换菜单
07-08
PC端横向滑动效果切换菜单是指在计算机上使用鼠标或键盘进行操作时，通过横向滑动的方式切换不同的菜单页面。 横向滑动效果切换菜单可以增加用户界面的互动性和美观性，让用户在浏览网页时更加方便快捷地切换不同...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值