Scroll设计

最新推荐文章于 2021-09-08 09:43:40 发布
最新推荐文章于 2021-09-08 09:43:40 发布
阅读量594 收藏
点赞数
分类专栏： UI组件设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiangej/article/details/23749523
版权

min ： 最小像素

max ：最大像素

CurrentValue ： 当前像素


纵向Scorll有两种类型：

类型A： 左面的滚动条滚动式，内容是以“行”单位进行滚动的。不会出现半行的情况

类型B： 右面的滚动条滚动式，内容是以“像素”单位进行滚动的。出现内容被边界盖住的情况


设计上，可以用类型B代替类型A。

也就是用“像素”代替“行”。把所有的计算单位统一成“像素”。



tiangej
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Scroll zkEvm技术设计全面思考
FeelTouch Labs
11-25 1519
Scroll相信 zk-Rollup 是圣杯——一种非常便宜和安全的第 2 层扩展解决方案。然而，现有的 zk-Rollups 是特定于应用程序的，这使得在 zk-Rollup 中构建通用的可组合 DApps 和迁移现有应用程序变得困难。Scroll引入了 zkEVM，它可以为一般的 EVM 验证生成 zk 证明。这使能够构建一个完全兼容 EVM 的 zk-Rollup，任何现有的以太坊应用程序都可以轻松迁移到它。在本文中，分析了 zkEVM 的设计挑战以及为什么它现在成为可能。
滚动条ScrollBar 样式设计-Thumb的设计
weixin_30576859的博客
08-22 607
　　在设计滚动调试的时候，中间滑块Thumb的样式一致设计的不好看，最终终于研究出来，Thumb的样式也应该通过模板来控制，才能达到理想的控制效果 <Track.Thumb> <Thumb BorderBrush="{TemplateBinding Background}" ...
ul li横向滑动设计
weixin_36448423的博客
09-23 2618
&lt;style&gt; .container-wrap { width: 100%; height: 50px; background-color: rgba(0,0,0,0.8); white-space: nowrap; overflow: hidden; overflow-x: scroll; /* 1 */ ...
前端必备自定义滚动库——iScroll
weixin_34102807的博客
05-21 1万+
作者真的很懒，这篇文章从想法开始到现在都几个月了。
js-网页特效 —— 元素滚动scroll系列
mocoll的博客
08-20 492
三、元素滚动scroll系列 3.1、scroll 概述 scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。 （超出内容也算在内，内容的高度大小） 整个页面被卷去用：window.pageYoffset 3.2、页面被卷去的头部 scroll滚动事件当我们滚动条发生变化会触发的事件 需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法: 1.声明了DTD ,使用document . documentElement . s
实现ScrollView的分页处理
专注Android开发
12-11 3809
项目中遇到了这样一种类似于ListView的需求：使用ScrollView分页显示数据，滑动到最后的时候自动加载下一页。如果是ListView我们可以判断当前显示的last item，从而得知是否已经滑动到最后，而ScrollView并没有提供这样一种方法，甚至不能添加OnScrollListener。那么我们该如何处理呢？综合参考了网友们的方法，我总结除了如下的实现形式： 1、实现自己的Scr
Unity中Scroll View的使用
m0_52155091的博客
03-27 1655
Scroll View介绍 当占用大量空间的内容需要在小区域中显示时，可使用滚动矩形。滚动矩形提供了滚动此内容的功能。 通常情况下，滚动矩形与遮罩 (Mask) 相结合来创建滚动视图，在产生的视图中只有滚动矩形内的可滚动内容为可见状态。此外，滚动矩形还可与一个或两个可拖动以便水平或垂直滚动的滚动条 (Scrollbar) 组合使用。 Scroll View子物体或组件 Content content即为该scroll view的内容物，所有的想放入scroll view的物体均创建在该物体下，常用格子组件（
better-scroll
qq_43342124的博客
09-08 75
BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window)的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。 这里 ...
better-scroll 实现下拉刷新、上拉加载的那些坑
热门推荐
蒲公英芽的博客
03-13 1万+
简介 better-scroll 是一款近几年移动端常用的插件，重点解决移动端（已支持PC）各种滚动场景需求的插件。可以实现竖向滚动效果，也可以实现横向滚动的效果。它不仅可以做普通的滚动列表，还可以做轮播图、局部文字滚动、下拉刷新、上拉加载等等。 better-scroll 是基本原生JS 实现的，不依赖任何框架。它编译后的代码大小是63kb，压缩后是35kb，zip后仅有9kb，是一款非常轻量的...
小程序click-scroll组件设计
10-16
主要介绍了小程序click-scroll组件设计，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Unity:UGUI之Scroll View剖析Demo,游戏等级UI设计,Layout,Toggle,Scroll
05-01
UGUI 之ScrollView剖析,及自定义设计,游戏等级的UI设计,可滑动切换;
基于better-scroll 实现歌词联动功能的代码
11-21
它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。 BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。 正文 前段...
Chart： 计算X轴标签个数
tiangej的专栏
09-08 4230
在图表中，横轴通常表示分类，纵轴表示数值。 纵轴的数值标签表示，是需要算法支持的，参见【图表轴刻度的思路，算法： 转载X】，略过。 这里说说横轴（X轴）的标签。   用K线图做例子，在一个图中表示的蜡烛线非常多，每根线对应一个时间，这些时间就是X轴上要表示的标签。 如果每根线的时间都在X轴表示出来，由于数量太多，就会相互重叠，根本分不清彼此，上面的文字让看不出来。 因此就要减少其数量。
图表： 要素构成
tiangej的专栏
09-08 2267
轴          ： axis 刻度      ：tick 系列       ： series 图例： legend
UI组件渲染的方式
tiangej的专栏
05-27 2172
1. 延迟渲染（集中渲染）      通过ENTER
Chart： 计算X轴标签个数1 （正确的分析） --- 确定标签间隔数
tiangej的专栏
09-14 2022
这是对【eCharts】版本3源码的分析结果：  通过遍历，尝试找出标签间隔数。 源代码位置：    echarts-master\src\coord\axisHelper.js       函数名：axisHelper.getAxisLabelInterval 【思路】 ===================================================
对FlexLite和MoreUI的评价
tiangej的专栏
08-15 1956
两者都是Actionscript开发的UI组件库。 都比Flex组件库“轻”很多。 FlexLite基本沿袭了Flex的Spark组件框架的结构设计（失效机制，延迟渲染，皮肤等），去除了一些功能。从而变得“轻”。 MoreUI基本结构和Flex3时代的mx组件框架的结构设计，没有将皮肤功能分离出来。与Flex组件相比，属性、功能减少了很多，从而变得“轻”。 我对两者的评价：
用vue3-seamless-scroll详细设计一个文字滚动
最新发布
04-11
首先，对于Vue3-seamless-scroll进行详细设计一个文字滚动，我们需要先明确需求和功能。 需求： 实现一个能够无限循环滚动的文字列表，支持自定义样式和布局，并能够处理用户交互事件。 功能： 1. 无限循环滚动 2....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值