纯css实现scrollview效果

最新推荐文章于 2024-05-08 19:32:20 发布
最新推荐文章于 2024-05-08 19:32:20 发布
阅读量6.8k 收藏 2
点赞数
分类专栏： 学习 文章标签： scrollview 纯css 清楚滚动条样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43843384/article/details/86061135
版权

纯css实现scrollview效果
在做小程序开发过程中，使用的taro框架，使用框架自己的组件scrollview，scrollX一直没有生效，然后尝试使用纯css编写，最后实现了。
以下为html部分代码
在这里插入图片描述
整个大盒子的样式设置：在这里插入图片描述

首先是外面盒子的属性设置如下在这里插入图片描述
然后里面的在设置一个属性如下在这里插入图片描述
，重要的一点事里面的盒子需要设置宽度，且比外面的盒子宽度大，然后是纯css样式清楚滚动条：
在这里插入图片描述
最后效果：在这里插入图片描述

前端小仙女
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html5 模拟scrollview,ScrollView组件的前世今生
weixin_29149709的博客
06-07 1280
前世：自从iphone上的mail应用有了这种加载的手势之后，我们发现很多本地应用都默默的采用了这种方式。这种手势已经成为一种趋势。那么我们能不能在移动端的html中模拟出这种本地效果里？首先让我们来分析下这里面的东西。1.有滚动效果。滚动条不是默认就有的，或许有的时候不要滚动条更好看点，有时候要滚动条好点，也就是滚动条需要可以自定义。2.可以下拉，上面有一部分能拉出来，同样的 下滑到最后可能触发...
css高度自适应屏幕_一招搞定微信小程序ScrollView等组件高度自适应
weixin_39635130的博客
11-29 1013
你还在为 scroll-view 高度自适应问题而惆怅吗？你还在为 swiper 高度自适应而挠头吗？接下来，跟着我一招撸了他们！简介众所周知，scroll-view 和 swiper 是微信自带的两个非常常用的两个组件，当然也非常好用，但是好用的前提是你得先给他们设置固定的高度，我们来看看官网是怎么说的：如上图所示，官网明确提出了，scroll-view 是需要设置固定高度的。设置定高按照官网的...
【微信小程序scroll-view高度自适应】
qq_31629679的博客
06-25 3940
思路：找一个参考的布局通过uni.createSelectorQuery()获取其的高度，再通过uni.getSystemInfoSync().screenHeight获取屏幕高度，计算出大概的scroll_view之外高度即可（这个不能100%获取剩余的屏幕，通过适当的调整比例参数适配屏幕）注：如果需要100%适配就需要获取除scroll_view外的全部view的高度，用已获取的屏幕高度进行计算 （或将scroll_view之外的布局包裹在一个大的view中，这样就可以使用第二种情况进行处理）
小记--基于vant list组件实现对scroll-view的替换
最新发布
沙骑马
05-08 171
【代码】小记--基于vant list组件实现对scroll-view的替换。
微信小程序使用scroll-view 标签实现内容上下或左右滑动
湾流~ 的博客
09-05 5739
scroll-view标签微信官方介绍 scroll-view标签属性 : scroll-x 为x轴(左右滑动),scroll-y为y轴(上下滑动) 左右滑动 scroll-view标签需要设置white-space: nowrap;里面的元素要设置为行内块元素 html <scroll-view scroll-x > <view class="templateitem" v-for="(item,index) in xxx" style=" width: 200px; heig
在Vue中，可以使用自定义组件和CSS来创建一个可滚动的视图区域。以下是一个ScrollView组件的示例，它具有横向滚动：
学习路上的小刘
04-21 973
vue 创建可滚动的试图区域
使用css scrollIntoView（）方法实现滚动到页面指定的位置
阡*-*陌的博客
03-10 1967
使用css scrollIntoView（）方法实现滚动到页面指定的位置
Android ScrollView实现反弹效果的实例
08-29
本篇将详细介绍如何在Android中自定义ScrollView以实现这一效果。 首先，我们需要创建一个自定义的ScrollView类，例如名为BounceScrollView。在这个类中，我们将重写一些关键方法以实现反弹效果。以下是一些关键...
UGUI实现ScrollView无限滚动效果
08-26
UGUI实现ScrollView无限滚动效果的知识点总结 UGUI实现ScrollView无限滚动效果是Unity游戏开发中的一种常见需求，本文将详细介绍如何使用UGUI实现ScrollView无限滚动效果。 1. 实现思路 实现ScrollView无限滚动...
Android自定义ScrollView实现放大回弹效果
08-30
Android 自定义 ScrollView 实现放大回弹效果 Android 中的 ScrollView 是一个常用的控件，能够在屏幕内容多时下上滑动以适配加载的内容。但是，ScrollView 滑动时的效果感觉太死板了，这个时候我们如果给它添加一...
小程序学习01->view与scroll-view
王明海的专栏
01-18 7931
- viewview是最常用也是最简单的的视图窗口组件，相当于HTML页面同的标签。 下面来实战一下使用view。 1、在app.json下添加view页面。 添加后按ctrl+s，微信开发工具会自动生成页面。 2、编写view.wxml页面<!--pages/view/view.wxml--> <view class="bgView"> 1 </view><view class=
居中滚动的scrollview
DemoKiller的博客
02-14 3448
我们平时用的listview，scrollview都是在边界的时候滚动，可是我们某些时候可能需要把焦点固定在中间一行来进行滚动。 网上有很多这种实现，大多利用android的picker来实现，今天我们可以尝试另外一种实现思路，利用scrollview+listview来完成这种需求。 这里的demo只是监听了按键进行滚动，并没有监听手势。 布局如下，在一个scrollview里面放一个li...
关于scrollview的无限滚动效果实现
weixin_33824363的博客
11-07 1063
起因及需求：做过阅读器的朋友应该知道，一般的阅读器都会有仿真、平移等特效。最近赶上真空期，项目不忙，有点时间，于是想抓起来，总结点干货。 仿真翻页及平滑翻页的基本实现： 仿真翻页，使用系统自带的UIPageViewController可以轻松实现流畅的翻页效果，这里暂不详述，后面会专门做一期UIPageViewController实现中实现自定义手势翻页的专题。 平滑（或覆盖）翻页，有...
使用vue实现移动端h5的scroll-view
JiangYuXuan1994的博客
11-28 1万+
需求：移动端h5，页面顶部有nav-bar，下部有tab-bar，缺少中间内容盒子，当tab-bar页面切换时，页面滚动位置丢失，导致交互类似页面重新渲染 根据这种需求，就衍生出了scroll-view组件，下面是我结合vant实现的简易的scroll-view 首先是tab集合页 <template> <section> <van-nav-bar...
H5页面（四）效果之实现页面滚动--------better-scroll插件
热门推荐
斗师——Ace
06-07 1万+
添加小程序，兑换各种视频教程/数据资源。 下载并用better.scroll.js文件；<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script> 中文文档：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/ 1...
UIWebVeiw内部scrollview嵌套UIView实现html文本和iOS原生混合界面
humiaor的博客
02-08 1557
在做UIWebView或者WKWebView展示邮件内容时，由于服务器邮件数据接口返回的发件人+收件人+附件是以单独字段返回的，而邮件详情是以html字符串返回的，这就造成了UIWebView无法一次性展示收发件人和邮件详情，我最初的做法是在一个UIScrollView上用头部的View+中间的UIWebView+尾部的View的方式来展示，头部View展示收发件人，中间的webView展示htm
实现一个带下拉弹簧动画的 ScrollView
SouthernBox的博客
03-25 1254
在刚推出的 Support Library 25.3.0 里面新增了一个叫 SpringAnimation 的动画，也就是弹簧动画。要是用它来做一个滑动控件下拉回弹的效果，应该不错吧。
Android开发：详解ScrollView实现ListView滚动效果
"Android开发中的ListView列表实现及ScrollView滚动视图详解" 在Android开发中，ListView和ScrollView都是处理大量数据或组件展示的重要组件。ListView通常用于显示可滚动的、具有多个相同类型的条目，而ScrollView...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值