ionic使用ion-scroll实现竖向侧边可滚动菜单栏

看看效果

，如图使用ioc-scroll就可以实现左侧的菜单栏，可滚动，当然是跟右边（ion-content）的内容分开的，互不干扰。

html：

js：

css：

时间： 2024-12-27 19:39:01

ionic使用ion-scroll实现竖向侧边可滚动菜单栏的相关文章

ionic侧边栏 ion-side-menus 以及 ion-tap结合侧边栏详解

学习要点:1. 侧边栏菜单 : ion-side-menus2. 侧边栏打开关闭切换指令 : menu-toggle/menu-close3. 主区域容器 ion-side-menu-content 属性设置4. 侧边栏区域容器 : ion-side-menu5. 脚本中控制侧边栏菜单接口 : $ionicSideMenuDelegate6. ion-tap 结合 ion-side-menus 一起使用 1．侧边栏菜单 : ion-side-menus侧边栏菜单是一个最多包含三个子容器的元素

scroll滚动到一定距离触发事件/返回顶部animate

html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0;} .box{ width: 960px; height: 1800px; bac

scroll()和scrollTop()方法——实现电商网站中的电梯导航

要想实现电商网站的电梯导航效果,首先需要了解以下知识点: jquery 事件 - scroll() 方法对元素滚动的次数进行计数,当用户滚动指定的元素时,会发生 scroll 事件.scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口).scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数. jquery CSS 操作 - scrollTop() 方法设置元素中滚动条的垂直偏移,scrollTop() 方法返回或设置匹配元素的滚动

jQuery语法介绍

来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1.12....或者2....的版本,由于2以上的版本去掉了IE9以下的兼容性,所以我们一般写页面使用1.12XXX的版本.jQuery的语法很多,jQuery API 中文在线手册 jQuery1.12.4下载地址查找选择器 id选择器根据给定的ID匹配一个元素. 使用任何的元字符(如 !"#

当导航条滚动到顶部时固定到顶部

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset='utf-8' /> 5  6 <script src='http://libs.baidu.com/jquery/1.9.0/jquery.min.js'></script> 7 8 <style> 9 html,body,div,span,applet,object,ifram

手机H5页面，滑动到底部自动加载下一页内容

做公众号项目中有如下场景,一个H5页面有列表数据,不考虑一次加载所有数据,故需要分页操作,解决方案为滑动到底部自动加载下一页内容.直接在H5的js当中实现. 主要使用jquery的scroll()方法: 当用户滚动指定的元素时,会发生 scroll 事件. scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口). scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数. 代码如下: $(window).scroll(function()

jQuery回到顶部

$(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 400) { //scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. $('#gotop').fadeIn(); } else { $('#gotop').fadeOut(); } }); $("#gotop").click(function(){ $("html,body").animate({scro

常用小Demo：用js/jQuery实现回到页面顶部功能

HTML代码: <div class="main"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab amet debitis, dolore eveniet illo maiores nam neque nesciunt perspiciatis praesentium quaerat qui, quidem rem sequi similique sunt ullam voluptate

2016/10/24 笔记总结

1.css3 动画:通过设置图片的opacity 来到hover时的动画: .nr_mod_service_hp_bottom_ts .inner .item .pic a .d_img { filter: alpha(opacity=100); opacity: 1; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } .n