纯css实现scrollview效果

最新推荐文章于 2023-06-25 17:09:55 发布
最新推荐文章于 2023-06-25 17:09:55 发布
阅读量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 1272
前世：自从iphone上的mail应用有了这种加载的手势之后，我们发现很多本地应用都默默的采用了这种方式。这种手势已经成为一种趋势。那么我们能不能在移动端的html中模拟出这种本地效果里？首先让我们来分析下这里面的东西。1.有滚动效果。滚动条不是默认就有的，或许有的时候不要滚动条更好看点，有时候要滚动条好点，也就是滚动条需要可以自定义。2.可以下拉，上面有一部分能拉出来，同样的 下滑到最后可能触发...
css高度自适应屏幕_一招搞定微信小程序ScrollView等组件高度自适应
weixin_39635130的博客
11-29 1002
你还在为 scroll-view 高度自适应问题而惆怅吗？你还在为 swiper 高度自适应而挠头吗？接下来，跟着我一招撸了他们！简介众所周知，scroll-view 和 swiper 是微信自带的两个非常常用的两个组件，当然也非常好用，但是好用的前提是你得先给他们设置固定的高度，我们来看看官网是怎么说的：如上图所示，官网明确提出了，scroll-view 是需要设置固定高度的。设置定高按照官网的...
【微信小程序scroll-view高度自适应】
qq_31629679的博客
06-25 3849
思路：找一个参考的布局通过uni.createSelectorQuery()获取其的高度，再通过uni.getSystemInfoSync().screenHeight获取屏幕高度，计算出大概的scroll_view之外高度即可（这个不能100%获取剩余的屏幕，通过适当的调整比例参数适配屏幕）注：如果需要100%适配就需要获取除scroll_view外的全部view的高度，用已获取的屏幕高度进行计算 （或将scroll_view之外的布局包裹在一个大的view中，这样就可以使用第二种情况进行处理）
微信小程序使用scroll-view 标签实现内容上下或左右滑动
湾流~ 的博客
09-05 5706
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 949
vue 创建可滚动的试图区域
使用css scrollIntoView（）方法实现滚动到页面指定的位置
阡*-*陌的博客
03-10 1942
使用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 7923
- 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 3435
我们平时用的listview，scrollview都是在边界的时候滚动，可是我们某些时候可能需要把焦点固定在中间一行来进行滚动。 网上有很多这种实现，大多利用android的picker来实现，今天我们可以尝试另外一种实现思路，利用scrollview+listview来完成这种需求。 这里的demo只是监听了按键进行滚动，并没有监听手势。 布局如下，在一个scrollview里面放一个li...
关于scrollview的无限滚动效果实现
weixin_33824363的博客
11-07 1061
起因及需求：做过阅读器的朋友应该知道，一般的阅读器都会有仿真、平移等特效。最近赶上真空期，项目不忙，有点时间，于是想抓起来，总结点干货。 仿真翻页及平滑翻页的基本实现： 仿真翻页，使用系统自带的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 1552
在做UIWebView或者WKWebView展示邮件内容时，由于服务器邮件数据接口返回的发件人+收件人+附件是以单独字段返回的，而邮件详情是以html字符串返回的，这就造成了UIWebView无法一次性展示收发件人和邮件详情，我最初的做法是在一个UIScrollView上用头部的View+中间的UIWebView+尾部的View的方式来展示，头部View展示收发件人，中间的webView展示htm
实现一个带下拉弹簧动画的 ScrollView
SouthernBox的博客
03-25 1252
在刚推出的 Support Library 25.3.0 里面新增了一个叫 SpringAnimation 的动画，也就是弹簧动画。要是用它来做一个滑动控件下拉回弹的效果，应该不错吧。
微信小程序----scroll-view组件（MUI索引列表）滚动动画
止于至善
01-03 8915
DEMO下载 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位； 利用scroll-view的scroll-with-animation属性实现滚动动画过度。 WXML view class=&quot;right-nav&quot;&gt; view bindtap=&quot;getCurrentCode&quot; class=&q
android scrollView弹簧效果
最新发布
05-13
Android中的ScrollView可以通过设置`overScrollMode`属性来实现弹簧效果。当滑动到ScrollView的边缘时，会出现一个弹簧效果，让用户知道已经滑动到了ScrollView的边缘。如果想要开启弹簧效果，可以在xml文件中添加如下代码： ```xml <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:overScrollMode="always"> ... </ScrollView> ``` 其中，`overScrollMode`有三个可选值： - `always`：表示始终开启弹簧效果； - `ifContentScrolls`：表示只有当内容可以滚动时才开启弹簧效果； - `never`：表示不开启弹簧效果。 需要注意的是，弹簧效果只有在用户使用手指拖动ScrollView时才会出现，如果是通过代码来滚动ScrollView，则不会出现弹簧效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值