首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有意思的水平横向溢出滚动

来看看这么一种情况: 我们有一个垂直方向溢出滚动的容器,以及一个水平方向溢出滚动的容器: 如果使用的是非触控板(大部分用户没有触控板),而是使用鼠标来进行操作,会发现,这两个容器中,只有垂直方向溢出滚动的容器...,是可以响应鼠标滚轮的: 垂直方向溢出滚动的容器,正常响应鼠标滚轮,可滚动内容 水平方向溢出滚动的容器,不会响应鼠标滚轮,不可滚动内容 那么,这里可能就是一个用户痛点。...那是必须的,本文就将介绍一种可能可行的技巧,在特定场景下在水平方向溢出滚动的容器,依然可以用鼠标滚轮进行滚动。 旋转大法 是的,既然只有垂直方向的溢出,才能响应滚轮操作。那我们不妨从这个角度入手。...,就变成了水平的容器,图中鼠标没有在滚动条上容器的运动就是通过滚轮实现的。...内容反向旋转 90°,修复视角 这个也好解决,我们只需要重新构造下 DOM,将原本的内容再反向旋转 90° 一次。 当然,需要同时处理好旋转中心。

2.5K10

创建水平滚动的正确方式【CSS 网格布局】

本文,我们探讨 CSS 网格的弹性布局,它是如何帮助我们实现水平滚动的,同时处理它带来的缺陷。...但是,当采用水平滚动布局时,至少需要满足两点 UX 原则: 你的设计必须在视觉上提醒他人,这是一组可以水平滚动的内容。最好的方法,就是让可滚动的内容露出一部分。 用户知道什么时候滚到末尾,这很重要。...带 .full 类名的子元素,将会占据全部视窗的宽度且没有内边距。 滚动容器 我们使用六个卡片来创建水平滚动容器,一次显示两张。...在这个例子中,卡片占有视图空间的 50% 减去间隔 40px。这时候,我们会看到第三张卡片露出来。 然而,需要注意的是,卡片两端被砍断部分。...还记得不,当水平滚动的时候,我们希望可滚动的内容是从屏幕的边缘滑出。 所以,我们在容器中添加 .full 类,并填补缺失的内边距。

2.6K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图)

    : 1.1将弹出视图添加到keyWindow,蒙版也添加到主窗口(主要原因是点击屏幕的空白处,需要隐藏弹出视图) 1.2展示的时候,动画从右上角往左下脚延伸;隐藏的时候,动画从左下脚往右上角收回 (展示的时候...2.水平方向弹出菜单视图的应用场景: 2.1、门店商品的支持的功能:向右横向展开视图(操作:下/上架、打印、编辑、同步网络)支持再次折叠隐藏视图 ?...2.2、网店商品目前只包含下架功能:展开折叠视图:(包含上/下架商品功能) ? 竖向弹出菜单视图 弹出菜单:会员模块的右上角的下拉菜单(竖向) ?...: 1.1将弹出视图添加到keyWindow,蒙版也添加到主窗口(主要原因是点击屏幕的空白处,需要隐藏弹出视图) 1.2展示的时候,动画从右上角往左下脚延伸;隐藏的时候,动画从左下脚往右上角收回 (展示的时候...2.水平方向弹出菜单视图的应用场景: 2.1、门店商品的支持的功能:向右横向展开视图(操作:下/上架、打印、编辑、同步网络)支持再次折叠隐藏视图 ?

    2.5K10

    iOS支持展开折叠的弹出菜单(水平方向弹出菜单视图) 【修订版】

    的内容是:将水平方向弹出菜单视图集成到VC的View 疑问解答,请关注公众号:iOS逆向 1.支持展开折叠的弹出菜单的实现思路: 1.1将弹出视图添加到keyWindow,蒙版也添加到主窗口(主要原因是点击屏幕的空白处...(nonatomic,weak) UIButton *tmpbtn; 2.水平方向弹出菜单视图的应用场景: 2.1、门店商品的支持的功能: 向右横向展开视图(操作:下/上架、打印、编辑、同步网络)支持再次折叠隐藏视图...cell // [self addpopV2VCView];// 测试开关2:将水平方向弹出菜单视图集成到VC的View 3.1 demo1: 将水平方向弹出菜单视图集成到cell...2.水平方向弹出菜单视图的应用场景: 2.1、门店商品的支持的功能: 向右横向展开视图(操作:下/上架、打印、编辑、同步网络)支持再次折叠隐藏视图 ?...2.2、网店商品目前只包含下架功能:展开折叠视图:(包含上/下架商品功能) ? 3.3 水平方向弹出菜单视图 弹出菜单HorizontalpopupView的具体代码 ?

    1.9K30

    屏幕宽高不够,滚动视图ScrollView来凑

    在默认情况下,ScrollView只是为其他组件添加垂直滚动条,如果应用需要添加水平滚动条,则可借助于另一个滚动视图HorizontalScrollView来实现。...ScrollView与HorizontalScrollView的功能基本相似,只是前者添加垂直滚动条,后者添加水平滚动条。...ScrollView支持的XML属性如下: android:scrollX:以像素为单位设置水平方向滚动的的偏移值。 android:scrollY:以像素为单位设置垂直方向滚动的的偏移值。...android:scrollbarThumbHorizontal:设置水平滚动条的drawable。 android:scrollbarThumbVertical:设置垂直滚动条的drawable。...android:scrollbarTrackHorizontal:设置水平滚动条背景(轨迹)的色drawable。

    3.1K60

    C001Android学习笔记-初级控件(一)

    的基本属性 概述: View是Android的基本视图,所有的空间和布局都是由View类直接或间接派生出来的,故所有View类的基本属性和方法是各控件和布局通用的; XML布局中常用的属性: id:指定当前视图的...,则为上级视图的宽度,多出的内容滚动显示); layout_height:指定当前视图的高度,属性值说明同宽度; layout_margin:指定当前视图与周围视图之间的空白距离(包括上、下、左、右),...(默认)表示水平布局,vertical表示垂直布局; gravity:指定布局内部视图与本线性布局的对齐方式; layout_weight:指定当前视图在宽或高占上级线性布局的权重; 代码中特有的方法:...setOrientation:设置线性布局的方向,LinearLayout.HORIZONTAL表示水平布局,LinearLayout.VERTICAL表示水平布局; setGravity:设置布局内部视图与本线性布局的对齐方式...; 3、滚动布局ScrollView 垂直滚动视图: ScrollView,layout_width要设置为wrap_content; 水平滚动视图: HorizontalScrollView,layout_height

    6610

    Android用户界面开发概述

    android:scaleY setScaleY(float) 设置该组件在垂直方向的缩放比 android:scrollX 该组件初始化后的水平滚动偏移 android:scrollY 该组件初始化后的垂直滚动偏移...:scrol1barSize setScrollBarSize(int) 设置垂直滚动条的宽度和水平滚动条的高度 android:scrollbarStyle setScrollBarStyle(int...设置该组件的水平滚动条的轨道对应的Drawable对象 android:scrollbarTrackVertical 设置该组件的垂直滚动条的轨道对应的Drawable对象 android:scrollbars...该属性支持如下厲性值: none:不显示滚动条 horizontal:显示水平滚动条 vertical:显示垂直滚动条 Android:soundEffectsEnabled setSoundEffectsEnabled...3.1使用XML布局文件 实际上在创建HelloWorld应用程序的时候就是使用该方法,这种方法是Android推荐使用的,不仅简单、明了,而且可以将应用的视图控制逻辑从Java代码中分离出来,

    2.5K100

    Android开发笔记(一百零一)滑出式菜单

    可移动页面MoveActivity 滑出式菜单从界面上看,像极了一个水平滚动视图HorizontalScrollView,当然也可以使用HorizontalScrollView来实现侧滑菜单。...不过今天博主要说的是利用线性布局LinearLayout来实现,而且是水平方向上的线性布局。...可是LinearLayout作为水平展示时有点逗,因为如果下面有两个子视图的宽度都是match_parent,那么LinearLayout只会显示第一个子视图,第二个子视图却是怎么拉也死活显示不了。...现在有个开源的HorizontalListView,它是水平滚动的列表视图,如果该视图只有两列,左边一列作为菜单页面,右边一列作为内容页面,这就很类似侧滑菜单的功能。...2、菜单默认在左边页,内容默认在右边页,所以首次加载视图时,页面要自动滑到右边的内容页(调用scrollTo方法滚动到内容页)。

    1.2K70

    2014-11-8Android学习------Android抽屉效果的实现案例--------动画Animation学习篇

    可以通过translate函数来实现滚动的功能。...如果抽屉方向是水平的话:delta为整个视图的宽度 接下来就是在画布上如何显示这个抽屉了,也是按照方向来的: if (mOrientation == VERTICAL) { canvas.translate...(0, delta); } else { canvas.translate(delta, 0); } 如果抽屉方向是垂直的话:画布水平移动0个像素,即水平方向不动;画布垂直方向移动视图的高度...,即垂直方向跟界面同高 如果抽屉方向是水平的话:画布水平移动视图的宽度个像素,即水平方向跟界面同宽;垂直方向移动0个像素,即垂直方向不动 说到这里,就非常的清楚了抽屉的位置了。...) {//是垂直方向的滚动 scrollY -= distanceY;//滚动的坐标Y是时刻在变化的 if (mPosition == TOP) {//如果现在的位置在顶部 tmpY

    1.5K20

    【Android从零单排系列二十六】《Android视图控件——ScrollView》

    一 ScrollView基本介绍 ScrollView是Android平台上的一个可滚动视图容器,它用于在一个可滚动区域内显示大量内容。...在ScrollView中,只能包含一个直接子视图(ViewGroup),通常是一个垂直方向的线性布局或相对布局。如果需要水平滚动效果,可以使用HorizontalScrollView作为替代。...二 ScrollView使用方法 在XML布局文件中定义ScrollView容器。在需要可滚动内容的区域内添加ScrollView标签,并指定其宽度、高度以及其他属性。...android:scrollbars:定义滚动条的显示方式。可选值有"none"(不显示)、"vertical"(只显示垂直滚动条)和"horizontal"(只显示水平滚动条)。...常见方法: scrollTo(int x, int y):将ScrollView滚动到指定的位置,参数x和y分别代表目标位置的水平和垂直偏移量。

    45820

    Flutter 首页必用组件NestedScrollView

    老孟导读:昨天Flutter 1.17版本重磅发布,新的版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...今天介绍的组件是NestedScrollView,大部分的App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图的组件,其滚动位置是固有链接的。...在普通的ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反的方向滚动(例如,允许用户在标签所代表的页面之间水平滑动,而列表则垂直滚动),则该TabBarView...,分为垂直和水平方向。...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。

    4.3K10

    Android经典面试题之RecycleView 深度解析与面试题梳理

    RecyclerView 是 Android 提供的一个高效且功能强大的列表和网格布局管理器,它不仅提高了滑动的流畅性,还通过回收复用视图的方式提高了内存的利用率。...**LayoutManager**:负责测量和定位项视图,以及决定哪些项可见、哪些项应该被回收复用。 **Adapter**:负责将数据绑定到视图上,以及管理数据集合的变化。...用户滚动 RecyclerView 时,LayoutManager 会计算哪些项应该显示在屏幕上,并决定哪些项可以被回收复用。...RecyclerView: 支持水平和垂直列表,以及网格布局。 支持装饰器模式,可以轻松添加分割线。 内建动画支持,可以自定义动画效果。 滑动性能优越,通过视图复用和预加载机制优化。 2....RecyclerView 的性能优化 预加载:通过 RecyclerView 的 setOnScrollListener 方法,可以实现预加载机制,预先加载用户可能滚动到的项。

    16910

    Apache Doris 3.0.4 版本正式发布

    该版本持续在存算分离、湖仓一体、异步物化视图等方面进行改进提升与问题修复,进一步加强系统的性能和稳定性,欢迎大家下载体验。...#46906 数据正确性:修复主键表在部分列更新导入包含 DELETE SIGN 列时的正确性问题。 #46194 修复主键表 Publish 任务持续卡住时,FE 可能存在内存泄漏的问题。...#45155, #45156, #46625, #47078, #45685, #46779 修复因 Storage Vault 配置不当导致数据无法回收或回收缓慢的问题。...#46798, #47536, #47475, #47324, #45072 修复回收过程中可能卡住导致数据无法及时回收的问题。...#45125 修复在极端场景下,可能出现的查询有权限的视图,但报错没有视图中引用的表的权限的问题。 #44621 修复 use db 时检查权限时不区分内外 Catalog 的问题。 #45720

    6310

    【Android从零单排系列二十七】《Android视图控件——HorizontalScrollView》

    一 HorizontalScrollView基本介绍 HorizontalScrollView是Android SDK中的一个视图容器,它允许用户在水平方向上滚动其子视图。...以下是HorizontalScrollView的一些基本特点和使用注意事项: 布局结构:HorizontalScrollView作为父容器,包裹一个只能在水平方向上滚动的子视图。...单个子视图:HorizontalScrollView只能有一个直接子视图,该子视图通常是一个水平方向的LinearLayout。...默认值为true,在子视图不足以填充水平空间时,会拉伸子视图使得水平空间被填满。 android:overScrollMode:设置滚动边界效果模式。...四 总结 使用HorizontalScrollView时,需要根据实际需求和内容的水平滚动性质来设置布局结构和子视图。通过合理处理布局和内容,可以为用户提供流畅且舒适的水平滚动体验。

    42810

    Android-UI布局---RecyclerView学习(二)利用它做的相册集效果

    这个代码在网上有, 横向ListView的功能,参考Android 自定义RecyclerView 实现真正的Gallery效果 首先说布局文件: RecyclerView视图中的item的布局: xml version="1.0" encoding="utf-8"?...imageview 视图 接下来是就是视图的自定义:com.example.zhy_horizontalscrollview03.MyRecyclerView public class MyRecyclerView...这里是 水平混动 //需要实现的效果就是每次你滑动停止之后,srcollView 第一个View 展现在上面的大图片中 mCurrentView = getChildAt(0); if...那么就必须解释下RecyclerView的这个名字了,从它类名上看,RecyclerView代表的意义是,我只管Recycler View,也就是说RecyclerView只管回收与复用View,其他的你可以自己去设置

    1.4K30

    PyQT模块、类、控件介绍

    QtXml模块 包含了用于处理XML的类库,此模块为SAX和DOM API 的实现提供了函数。 QtSvg模块 通过一组类库,为显示矢量图形文件的内容提供了函数。...QtXmlPatterns模块 所包含的类实现了对XML和自定义数据模型的Xquery与XPath的支持。 QtDesigner模块 所包含的类允许使用PyQt扩展Qt Designer。...QspinBox控件 允许用户选择一个值,要么通过按向上/向下键增加/减少当前显示值,要么直接将值输入到输入框中 QScrollBar窗口控件 提供了一个水平的或垂直的滚动条 QSlider控件 提供了一个垂直的或水平的滑动条...树视图 TableView 表格视图 ColumnView 列视图 UndoView 撤销命令显示视图 Item Widgets(Item-Based)——项目控件 ListWidget 列表控件...QListView:列表视图 QButtonGroup:按钮组 QScrollBar:滚动区域 QDateEdit:日期编辑框 QFontComboBox:字体选择框 QFileSystemModel:

    64231
    领券