如何实现滑动scrollview上下隐藏

============问题描述============

现在有一个需求，就是一个界面如下

A固定在顶部，C固定在底部

其中B是一个scrollview(也可能是listview)，要实现，在向上滑动B的时候，A平滑的往上滑，同时C平滑的往下滑，直到消失，在向下滑动B的时候，A平滑的往下滑，C平滑的网上滑，直到出现，这个效果应该如何实现，有没有例子

============解决方案1============

我的想法是，监听scrollview滚动，根据滚动的方向确定是显示还是消失，并且在显示和消失时加入动画效果。

============解决方案2============

参考

时间： 2024-12-09 12:25:58

如何实现滑动scrollview上下隐藏的相关文章

设置div默认顶部显示,并滑动显示或隐藏

html div默认是隐藏的,如果想默认显示,去掉style里面的"display:none;"即可 <div id="msg" style="display:none;z-index:99;width:100%;background:#d2d2d2;margin-left:0;margin-right:0;padding-right:15px;padding-left:15px;padding-top:15px;padding-bottom:15p

滑动ListView自动隐藏页面头部和底部元素的例子

完整工程代码在这:https://github.com/NashLegend/Auto-Hide-ListView 现在很多软件都有这种滑动列表的时候自动隐藏页面头部和底部元素的功能,比如Google+.在刚刚进入Activity的时候,页面是一个列表,底部有一个view,头部一个view,当列表向上滑动的时候,隐藏头尾元素,以显示更多内容,当列表向下滑动的时候,再将头尾元素拉出来.比如Google+. 刚刚进入时是这个样子: 再把列表身上一拉,头尾隐藏,成了这个样子: 再往下拉,就会再变回第一

移动端在有弹出层时如何禁止底层的滚动（实现表层滑动的时候，底层禁止滑动，表层隐藏的时候，底层依然可以滑动）；

要实现以上图示的功能;自然想到zepto里的swipeUp方法,但是用了以后发现,有的移动端浏览器,不起作用,有的浏览器起作用,但是底层也会跟着滑动; 于是加一下代码: document.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); 加了以后上滑表层的页面,底层的页面不会跟着滚动了,但是表层页面隐藏以后,底层的页面就滑不动了; 于是下面一段代码就出现了,完美解决; docum

js鼠标滑动图片显示隐藏效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>  <meta http-equi

vue监听滑动事件，隐藏移动端键盘或者input失去焦点

在页面加载的地方mounted或者created写监听事件,注意使用touchmove事件 window.addEventListener("touchmove",this.myTouchMove) // 监听滑动事件 // 滑动关闭键盘 myTouchMove: function (evt) { if(document.hasFocus){ const inputId = document.getElementById('myBox') // 获取ID inputId.blur()

vue组件弹框过渡效果，如，点击显示为从左到右滑动，收回隐藏为从右到左滑动

vue组件 <transition name="carHistory"> <car-History-Line v-show="showHistoryLine" @closeHitsory='closeHitsory'></car-History-Line> </transition> css .carHistory-enter { animation: carHistory-dialog-fade-in 0.3s ea

滑动之后，隐藏软键盘

document.body.addEventListener('touchend', function(evt) { document.activeElement.blur(); });

css - (左右滑动时，隐藏底部滚动条)

先上效果图,如下: 是不是经常看到此类效果? 这里如果不借用其它框架,单纯的利用css 来实现怎么做呢? 1.这一看就要用到overflow,但是用它会有一个默认的滚动条: 2.那么重点来了,怎么解决这个问题呢? 3.用 ::-webkit-scrollbar 就可以很好地解决. 代码如下: css * { padding: 0; margin: 0; } .nav { position: fixed; top: 0; background: white; width: 100%; height

iOS-实现映客首页TabBar和滑动隐藏NavBar和TabBar

之前在做直播的时候,参照了映客App,发现其首页的效果还挺不错,在网上找了一下相关仿映客App代码和博客,大部分都是说如何播放直播流和推流,对于UI这块甚少,所以我自己花了点时间研究了一下映客的首页UI效果. 转载自 SUN'S BLOG - 专注互联网知识,分享互联网精神! . 映客首页主要分两部分,一部分是实现没有文字而且中间按钮突出的TabBar,另一部分是显示滑动ScrollView隐藏和显示NavBar和TabBar.我们来慢慢看. 一.TabBar实现首先,我们看下实现后的效果.