axure 制作滚动效果(不显示滚动条)

笔者在上一篇文章《axure制作app侧滑菜单》中介绍了淘宝app筛选菜单的制作方法,但筛选菜单中的内容仅仅填充了“一屏”的内容,如果内容比较多,就需要菜单能够上下滚动,且仅仅是菜单部分滚动,其他商品列表部分(背景)无需滚动,本文介绍一下实现方法:

上篇《axure制作app侧滑菜单》博文地址: http://pmdrx.blog.51cto.com/11810835/1911380

要是实现局部滚动,动态面板即可实现,但动态面板的滚动条是不能隐藏的,这个时候我们可以用一个小技巧:在动态面板A中嵌套一个动态面板B,两个动态面板均取消自动调整为内容尺寸,B的宽度略大于A,设置B为可以滚动(显示垂直滚动条),因为B的宽度超过了A,所以我们预览的时候就看不到滚动条了,示意图如下:

明白了实现原理,我们开始制作滚动菜单:

  1. 把之前做好的菜单组合右键-转换为动态面板,并命名为“菜单”,取消勾选“自动调整为内容尺寸”;
  2. 进入“菜单”面板的状态1,把里面的内容全选,再次右键-转换为动态面板,取消勾选“自动调整为内容尺寸”,设置为自动显示垂直滚动条;
  3. 把里面嵌套的动态面板高度减小一些,让底部的两个按钮放到嵌套面板的外面,这样两个按钮就可以固定在页面底部不跟随滚动了;
  4. 进入嵌套的动态面板的状态1;把菜单内容宽度增加一点(增加滚动条的宽度即可),高度也增加一些,多填充一些内容。

这样,菜单部分就搞定了,其他的“筛选按钮”、“遮罩”部分的事件内容保持不变。预览后,菜单部分可以垂直滚动且不显示滚动条,菜单底部的两个按钮固定不滚动。

时间: 2024-10-06 00:28:36

axure 制作滚动效果(不显示滚动条)的相关文章

CSS-界面滚动时不显示滚动条

设置滚动条的样式: div::-webkit-scrollbar { width: 0; } 关于::-webkit-scrollbar ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用. CSS滚动条选择器 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动条

div可以滚动但不显示滚动条

首先有3个div, 第1个,固定大小是200*200(单位为px,下同) 第2个,不固定大小,其大小要用第3个div把个撑开,但是这个div必需要有滚动条, 第3个,固定大小与第1个div保持一致200*200 <div style="width: 200px;height: 200px; border: 5px solid red; position: relative;overflow: hidden;"> <div id="abc" styl

PC版模块滚动不显示滚动条效果

以前对某个模块增加无滚动条的滚动效果,还需要找个插件才能实现,现在发现个简单方法,用普通的CSS就可以实现. 此方法只适用于不显示滚动条的滚动效果,如果需要自定义滚动条样式,还是需要插件来实现. HTML: <div class="sidebar"> <div class="sidebar-bd"> 内容 </div> </div> CSS: .sidebar{ width: 50px; position: fixed

jQuery 随滚动条滚动效果 (适用于内容页长文章)

直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollOut = $('.cookie-list'); //隐藏rollStart之后的区块 rollStart.before('<div class="da_rollbox">

jQuery 随滚动条滚动效果 (固定版)

//侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollSet = $('.search,.weibo,.group,.feed-mail,.tags'); //添加rollStart之前的随动区块 rollStart.before('<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"

axure制作登录功能并跨页面显示用户名

用户登录是好多网站都有的重要功能,今天使用axure制作一个用户登录,并把用户名显示到新页面的案例. 一.拖入元件并布局: 1. 在页面中拖入两个文本框,并命名为username.password,把password的类型设置为"密码",把两个文本框的提交按钮设置为"login",这样就可以直接按回车键登录了:为了显得美观一点,我们不在制作传统的"用户名""密码"提示文本,而是把提示文字放到文本框中. 2.拖入按钮修改文本为&

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度

[.NET Concept]善用AutoScroll达到用滚动卷动显示内容的效果

善用AutoScroll达到用滚动卷动显示内容的效果 时常会在讨论区碰到有人提问内容过长想要增加滚动效果这类的问题,通常多半这类的提问者都会陷入如何使用VScrollBar或是HScrollBar的迷思.事实上要达到这效果其实可以不需要使用这两个控件,只需善用容器类的AutoScroll属性,经过设定属性的动作,不须撰写半行程序即可达成. 举个例子来说,假设今天我要显示一张很大的图片在表单上,我们可以依下列步骤设定: Step1.设定表单的AutoScroll属性为True Step2.加入Pi

jQuery实现滚动效果详解1

声明:第一次写原创,本人初学,很多地方一知半解,本篇算是一个学习的笔记,欢迎批评指正,转载请注明. 今天要做的效果是在网上经常能看到多幅图片向左无缝滚动,鼠标滑过动画暂停,鼠标滑出动画继续的效果.网上现成的代码和插件很多,拿来用有时候不大顺手,今天我就来学习一下它的原理. 要实现这个效果:1.需要一个展示区,滚动的内容只有通过展示区才能被看到id=visual_area2.把滚动的内容横向排列的载体,我们姑且叫它画布,注意不能理解PS中的画布class=scroll_area3.看起来要滚动的内