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

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

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

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

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

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

    2.6K50

    那些前端常用的网站插件

    — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画...Handlebars.js — Javascript 模板 jInvertScroll — 视差滚动 One page scroll — 又一个页面滚动库 Parallax.js — 对智能设备方向变化做出响应的视差引擎... — 两列垂直反向滚动 Favico.js — 动态 favicon Midnight.js — 固定头部切换效果 Anime.js — 动画库 Keycode — 获取键盘按键的 JavaScript.../链接 cheatsheet — 可以写在中的所有标签 Ghost — 基于 Node.js 的博客平台 What runs — 一个用于网站技术分析的 Chrome 插件 Learn anything... — 一个强大的用于分析某个主题的思维导图

    4.5K50

    一款用于 Vue.js 的无限滚动插件

    本文由 #公众号:一个正经的程序员 原创 作者:散淡样子 GitHub:https://github.com/LouisLiu00 00 前言 Web 项目经常会用到下拉滚动加载数据的功能,今天就来种草一款...(文末附链接) 开箱即用: 简洁至上的 API、内置加载动画以及良好的兼容性,可立即投入生产 双向支持: 目前支持向上和向下两种加载方式,可适应于更多的应用场景 结果展示: 可配置的加载结果展示,比如没有更多数据...--infinite-loading这个组件要放在列表的底部,滚动的盒子里面!...state给事件处理器来改变加载状态, loaded方法用于在每次加载数据后停止播放动画,然后该组件将准备好进行下一次触发; complete方法用于完成完整的无限加载,则该组件将不再处理任何滚动操作。...如果在loaded调用complete方法时永远不会调用该方法,则此组件将显示用户的结果消息,如果不是,则将显示不再有用户消息,并且可以按slot设置其它内容; reset方法是将组件返回到原来的状态。

    45320

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

    2.水平方向弹出菜单视图的应用场景: 2.1、门店商品的支持的功能:向右横向展开视图(操作:下/上架、打印、编辑、同步网络)支持再次折叠隐藏视图 ?...sharedApplication].keyWindow [kWindow addSubview:self]; [kWindow addSubview:self.cover];//蒙版添加到主窗口, 蒙版用于监听点击事件...,来隐藏弹出视图 1.2 展开 展示的时候,动画从右上角往左下脚延伸;隐藏的时候,动画从左下脚往右上角收回 (展示的时候,从上往下,即x,y 慢慢变大) 展开效果的实现原理: 1 点击展示商品信息的...是根据当前点击的菜单按钮所在的商品cell进行计算和坐标转换的。...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、门店商品的支持的功能: 向右横向展开视图(操作:下/上架、打印、编辑、同步网络)支持再次折叠隐藏视图 ?...3.3 水平方向弹出菜单视图 弹出菜单HorizontalpopupView的具体代码 ?

    1.9K30

    组件分享之后端组件——用于将日志写入滚动文件的组件包lumberjack

    组件分享之后端组件——用于将日志写入滚动文件的组件包lumberjack 背景 近期正在探索前端、后端、系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组件...组件基本信息 组件:lumberjack 开源协议: MIT license 内容 本节我们分享一个用于将日志写入滚动文件的组件包lumberjack,它可以有效的配合zap组件进行快速使用。...Lumberjack 旨在成为伐木基础设施的一部分。它不是一个多合一的解决方案,而是一个位于日志堆栈底部的可插入组件,它简单地控制写入日志的文件。...Lumberjack 可以很好地与任何可以写入 io.Writer 的日志包配合使用,包括标准库的日志包。 Lumberjack 假设只有一个进程正在写入输出文件。...在同一台机器上的多个进程中使用相同的伐木工人配置将导致不当行为。

    47720

    无论怎么做都是错误的单细胞水平相关性分析

    但是很多人有自己的生物学背景,会考虑不同的生物学功能基因集的打分,以及不同的基因的相关性,试图去从单细胞水平提出自己的生物学见解。...不过,我这里可能需要提醒大家一定要注意, 如果是真正的单细胞水平相关性分析,无论怎么做都是不合理的。...expr3: expr3是从sce对象的scale.data槽中提取的表达矩阵的转置。这个矩阵包含了经过缩放的表达值,通常用于可视化和聚类。...但是,实际上,如果大家是做真正的单细胞水平相关性分析,无论取什么样的表达量矩阵怎么做都是不合理的!...,因为一些传统上被认为是管家基因的基因在不同条件下的表达水平可能会有显著变化。

    19210

    2019年最全的web前端知识体系汇总

    : · Fullpage.js—快速实现全屏滚动特性: · Highlight.js—web 语法高亮: · Waypoints.js—滚动到某个元素位置时触发一个功能: · Typed.js—打字机效果...· Vivus.js—在 SVG 上绘制动画 · Wow.js—滚动时展现动画 · Scrolline.js—页面滚动时显示滚动进度 · Velocity.js—快速流畅的 JavaScript 动画...· Animate on scroll—漂亮的页面滚动元素动画 · Handlebars.js—Javascript 模板 · jInvertScroll—视差滚动 · One page scroll...—又一个页面滚动库 · Parallax.js—对智能设备方向变化做出响应的视差引擎 · Typeahead.js—搜索补全 · Dragdealer.js—炫酷拖拽 · Bounce.js—创建炫酷的...CSS3 动画 · Pagepiling.js—全屏滚动 · Multiscroll.js—两列垂直反向滚动 · Favico.js—动态 favicon · Midnight.js—固定头部切换效果

    2.8K00

    数据科学方向求职丨简历中应避免的四个错误

    注意,每家公司的要求各不相同。比如被谷歌聘用的人在其他公司也可能会落选。所以说,一份无可挑剔的数据科学岗位简历是不存在的。 话虽如此,但简历中有些错误是致命的。...在下文中,我们总结了简历中应避免的四个错误。 ? 1. 堆砌无关紧要的项目 在简历中堆砌大量无关紧要的项目,这会让你的简历大打折扣。...为什么 对于数据科学,人们感兴趣的往往是算法。因此这也是大多数人投入时间精力的地方。问题在于,设计模型与可用于生产的深度学习或数据科学不同。...补充项:拼写错误 这并不是数据科学方面的问题,但在面试时我们惊讶的发现很多人会出现拼写错误。总而言之,在简历中出现错别字、拼写错误和格式错误都是致命的。...无论你的经验水平如何,拼写错误都是必须避免的问题,这会让你的面试大大减分。 为什么 毫不奇怪,你在简历中体现的细节问题是与你的项目能力和技术发展息息相关的。 该怎么做 注意细节,仔细检查。

    62190

    中国机器人产业是如何犯下方向性错误的?

    受益于“中国制造2025”战略的提出,机器人成为时下最热门的产业之一。然而就在这时候,行业内冒出了不和谐的声音,称中国机器人产业发展连方向都是错的。...中国在机器人行业的创新能力远远落后于日本、美国、德国等发达国家,而眼下在机器人产业上所付出的努力,“连方向都是错的”。...这一方式也被专家认为是“方向性的错误”。他说:“传统的招商引资模式仅仅适用于中西部地区,而沿海发达地区寸土寸金,应该用更大的精力去创新。”...他认为,机器人产业也在不断转型升级,等到中国在关键零部件上赶上了国外水平,或许由于制造技术的变革,这些零部件已经变成了“白菜价”,而美日等国又抢占了新一轮产业发展的先机,中国只能再次追赶。...因此,中国应该更多地做前瞻性、战略性、创新性的工作,在智能机器人的方向上针对未来即将出现的需求提早布局,而不是再走“世界工厂”的老路子。 在这方面,美国可以成为中国效仿的对象。

    67430

    这些SQL错误用法,如果经常犯,说明你的水平还很low...

    今天来分享几个MySQL常见的SQL错误(不当)用法。我们在作为一个初学者时,很有可能自己在写SQL时也没有注意到这些问题,导致写出来的SQL语句效率低下,所以我们也可以自省自检一下。...1、 LIMIT 语句 分页查询是最常用的场景之一,但也通常也是最容易出问题的地方。比如对于下面简单的语句,一般DBA想到的办法是在type, name, create_time字段上加组合索引。...2、隐式转换 SQL语句中查询变量和字段定义类型不匹配是另一个常见的错误。...函数作用于表字段,索引失效。 上述情况可能是应用程序框架自动填入的参数,而不是程序员的原意。现在应用框架很多很繁杂,使用方便的同时也小心它可能给自己挖坑。...: 聚合子查询; 含有LIMIT的子查询; UNION 或UNION ALL子查询; 输出字段中的子查询; 如下面的语句,从执行计划可以看出其条件作用于聚合子查询之后: SELECT * FROM

    84700

    CVPR 2023 中的领域适应:用于切片方向连续的无监督跨模态医学图像分割

    CVPR 2023 中的领域适应:用于切片方向连续的无监督跨模态医学图像分割 在这篇文章中,提出了 SDC-UDA,一种简单而有效的用于连续切片方向的跨模态医学图像分割的体积型 UDA 框架,它结合了切片内和切片间自注意力图像转换...SDC-UDA 在翻译和分割过程中考虑了体积信息,从而改善了分割结果在切片方向上的连续性,可以看到在图的最右侧,下面方法的 Dice 值在切片方向上是稳定的。...stage 5:将生成的 target 数据、真实 target 数据和他们的标签用于优化学生网络,最终的预测也是在学生网络上。...由于切片是单独处理的,重新构建转换后的体积通常需要额外的后处理,如切片方向插值,但这仍然无法完全解决切片方向不连续等问题。...请添加图片描述 可视化结果比较如下图: 请添加图片描述 总结 这篇文章提出了 SDC-UDA,一种用于切片方向连续的跨模态医学图像分割的新型 UDA 框架。

    1.3K50

    自然语言处理终极方向:深度学习用于自然语言处理的5大优势

    Yoav Goldberg在他的《NLP研究人员神经网络入门》中强调,深度学习方法取得了令人印象深刻的成果,他说在此文中说:“最近,神经网络模型也开始应用于文本自然语言信号,并再次带来了非常有希望的结果...他还继续强调,这些方法易于使用,有时可用于批量地替代现有的线性方法。他说:“最近,该领域在从稀疏输入的线性模型切换到稠密数据的非线性神经网络模型方面取得了一些成功。...而深度学习到的特征易于适应,能快速训练,它们可以持续学习,以便达到以前未能实现的、更好的性能水平。 持续改进 NLP的深度学习的另一个承诺是,在挑战性问题上持续快速改进。...自动语音识别流程中的几大组块是语音处理,声学模型,发音模型和语言模型。问题是,每个组块的属性和错误类型是不同的。这激发了开发一个神经网络来端到端地学习整个问题的需要。...每个组件都有各自的神经网络,但是每个组件中的错误都是不同的,所以它们可能无法很好地协同工作。 所以这让我们拥有动机,尝试去把整个语音识别当作一个大模型来训练。”

    1K60

    KuaiRec | 快手发布首个稠密度高达99%的推荐数据集, 可用于多种推荐系统方向研究

    该数据集可用于离线的A/B测试,以及可用于无偏推荐、交互式/对话推荐或者是基于强化学习推荐等方向。...该数据集包含两种规模的数据,即Small matrix和Big matrix,其中Small matrix稠密度为99.6%可用于可信的评测,而Big matrix的稠密度为13.4%可用于推荐模型的训练...该数据集可用于高效的离线A/B测试,因此可用于无偏推荐(Unbiased RS)、交互式推荐(Interactive RS)和对话推荐(Conversational RS)等。...由于该数据集的原始版本是显式数据,因此为了转换为隐式反馈数据用于推荐排序等研究,该论文建议将视频观看长度大于视频本身时长的2倍为正样本,即用户至少观看了2次完整的视频才认为是正样本。...第二,Small trix版本的数据集可以作为推荐系统中多个研究方向的基准数据集,例如推荐系统中的偏差、交互式推荐和评估。

    84110

    iOS 封装跑马灯和轮播效果

    iOS UICollectionView实现跑马灯和轮播效果.gif 功能描述:WSL_RollView 是基于UICollectionView实现的支持水平和垂直两个方向上的的分页和渐进循环轮播效果...一、实现方法 ①、 首先用UICollectionView和计时器实现一个基本的水平滚动效果,如下图,这个太简单就不在此详述。...iOS UICollectionView ②、对比上面的效果图,我们还需要解决分页的宽度和循环滚动的问题。...自定义分页宽度:默认的分页宽度是UICollectionView的宽度,所以当分页宽度的不等于UICollectionView的宽度或分页间隔不等于0时会出现错误,这时就需要我们通过自定义UICollectionViewFlowLayout...velocity 滚动速率,通过这个参数可以了解滚动的方向 */ - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset

    4.2K40

    网站打开之后,主题插件显示错误的解决办法,适用于各种BUG。

    这篇文章的主要目的不是真的能解决所有问题,是为了让问题具体化,按照如下教程操作,将网站的错误代码反馈给主题/插件的开发者,然后坐等解决方案即可。...先看看正常情况下网站的打开之后显示错误的情况,如下: ? 是的就是这么简简单单的一张图片,并没有具体代码,小白可能就懵圈了,什么原因?怎么回事?...其实我们可以简单设置下网站,让显示错误的方式具体一点,然后丢给开发者就行了。 首页打开网站设置,全局设置,然后找到如图开发模式,将其打开(on为开启状态): ?...看到了吧,具体错误代码及文件出错的位置全都显示出来了,接下来就把截图丢给主题或者插件的开发者就行了。.../就行,是的话就是插件问题,不是的话基本都是主题导致的错误。

    65310

    Android之布局详解

    android:descendantFocusability 控制子布局焦点获取方式 常用于listView的item中包含多个控件 点击无效 android:scrollbars 设置滚动条的状态...android:scrollbarThumbVertical 设置垂直滚动条的drawable android:scrollbarTrackHorizontal 设置水平滚动条背景(轨迹)的色drawable...因为此时水平方向上的长度是不固定的,每次加一个控件,水平方向上的长度都会改变,因而无法指定该方向上的对齐方式。...同样的道理,当LinearLayout的排列方向是vertical时,只有水平方向上的对齐方式才会生效。 LinearLayout中另一个重要的属性。...水平方向上裁剪元素,仅当元素大小超过格子的空间时 注意 使用layout_columnSpan 、layout_rowSpan时要加上layout_gravity属性,否则没有效果;另外item在边缘时宽高计算会出现错误

    2K10
    领券