iscroll | 易学教程

iScroll a dynamically filled div ONLY without scrolling main page also

阅读更多关于 iScroll a dynamically filled div ONLY without scrolling main page also

So this post might get lengthy but I'm stuck with iScroll. What I'm doing is populating my list with articles and when one gets clicked, I'm sliding in a div over the list to display the article. That part works but what doesn't is when I scroll through the article and get to the end, it keeps scrolling the list with articles. You can have a look here (the site is in russian but click on an article and scroll all the way to the bottom). Here's my entire code: <head> <style> body{ padding: 0; margin: 0; border: 0; } #header{ position:fixed; top:0; left:0; height:100px; width: 100%; background

工作日志-面向对象编程

阅读更多关于工作日志-面向对象编程

1.搜索连动事件 2.页面显示动作 3.没有数据返回需要一个空的无数据页面 4.事件触发，动态生成的元素绑定数据使用模板，在template中传入相应得到函数 123456 var config = { userId:'.../' show:function() { //这里添加方法 }} 如何解决移动端input输入值触发拼音键入事件 1234567891011121314 var cpLock = true;input.addEventListener('input',function(){ //监听input的输入事件 if(cpLock){ //执行函数 }})document.addEventListener('compositiononstart',function(){ //开启中文 cpLock = false;})document.addEventListener('compositiononend',function(){ cpLock = true; }) IScroll的移动问题首先 iscroll有很多版本普通版 prop版无限版。。。 new IScroll(‘.querySelector’) 固定样式 1234 div class = 'wrapper' div id = 'scroll' ul ---> 这是滑动得到元素 li 滑动原理 id

webkit-overflow-scrolling forms broken on iOS 7 full-screen web app

阅读更多关于 webkit-overflow-scrolling forms broken on iOS 7 full-screen web app

I'm having trouble with a full-screen (saved to home screen) iPhone web app on iOS7. Typically, when an input is selected, it has scrolled into view above the keyboard. However, this doesn't seem to happen on iOS7 for scrolling DIVs in a full-screen web app. Thus, when a DIV uses "-webkit-overflow-scrolling: touch" and an input in the bottom half of the screen is clicked, the keyboard is fired, but the input doesn't scroll up. AND, at that time, the input won't respond to any further onFocus events that I could otherwise scroll it up with. Anyone seen a workaround? Updating the viewport meta

Jquery Mobile go back button scrolls to top

阅读更多关于 Jquery Mobile go back button scrolls to top

In my Jquery Mobile website I am using href for back button like; <a id='{0}' class='{1}' href='/' data-role=""button"" data-icon=""arrow-l"" data-transition=""slide"" data-direction=""reverse""> but if I have scroll on first page, back button jumps back to top again. First page does not stay on same position. Is there any solution for this? Najeeb K Solution I had this issue i fixed it using iSroll While going from PageA to PageB save the scroll position of PageA in a variable. to do this modify the iscroll.js and add getScrollY method under scrollTo like this scrollTo : function(x, y, time,

响应式，移动端,摘要

阅读更多关于响应式，移动端,摘要

一，第一课<br/> 1.什么是响应式可以用一套代码，来适应多种设备，让用户达到更好地访问效果 2.流程 1600==>一个页面 800==>另外一个 480==>另外一个页面问题 1》开发的时候选择哪个宽度写代码 1》看情况处理 2》首选什么浏览器进行开发（兼容到什么地步） 1》55%谷歌 2》5%ie 3》范围值应该是多少大于800==》1600 480-800==》800 小于480==》480 二、第二课<br/> 4》谁负责切图 UI懂H5 H5懂UI 5》还原度不太能还原的特别极致 6》开发项目前最重要==》沟通三、第三课<br/> 7》项目木步骤 1.html 2.css 3.JS(特效) 8》响应式图片 img srcset==>缓存 picture==>解决本身srcset的问题，但是不兼容IE8或者ie8以下 svg 解决响应式图片终极版 9》网址 ehcto.ehcto.com 四、zepto(JS库)<br/> jquery.js ===》PC zepto.js ===》移动端(轻量级) 相同点： api几乎差不多一样不同点： 1》事件不同 2》体积大小不同 *******注意：在移动端页面中使用click事件会有300毫秒的延迟 click===>tap swipeLeft, swipeRight, swipeUp, swipeDown 五

Jquery Mobile go back button scrolls to top

阅读更多关于 Jquery Mobile go back button scrolls to top

问题 In my Jquery Mobile website I am using href for back button like; <a id='{0}' class='{1}' href='/' data-role=""button"" data-icon=""arrow-l"" data-transition=""slide"" data-direction=""reverse""> but if I have scroll on first page, back button jumps back to top again. First page does not stay on same position. Is there any solution for this? 回答1: Solution I had this issue i fixed it using iSroll While going from PageA to PageB save the scroll position of PageA in a variable. to do this modify

how to use iscroll javascript in phone gap?

阅读更多关于 how to use iscroll javascript in phone gap?

I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0 I have copied the javascript of iscroll-lite from here html code <div id="wrapper" class="wrapper"> <div id="wrapper-container" class="wrapper-container"> <div id="header" class="header"> <div id="header_title" class="header_title"> </div> <div id="abc" class="abc"><img src="img/abc.png""/> </div> </div> <div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; /> </div> <div id=

input field hidden when soft keyboard appears in phonegap

阅读更多关于 input field hidden when soft keyboard appears in phonegap

Creating a mobile application using Phonegap 3.6.3 for Android and iOS. The problem is only for Android, as iOS acts as I would like it to. When I click on an input text field, or a textarea, a soft keyboard appears. It covers these elements sometimes. The pages are placed within a iScroll, right at the bottom, and another absolute-placed div, thus I cannot scroll to either of these once the screen pops up. I suspect I have to change the webview to be smaller when the keyboard comes up. However, after trying many things, it isn't working. config.xml <preference name="permissions" value="none"

3种方法实现CSS隐藏滚动条并可以滚动内容

阅读更多关于 3种方法实现CSS隐藏滚动条并可以滚动内容

原文链接： http://caibaojian.com/hide-scrollbar.html 隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在 CSS 也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。方法1：计算滚动条宽度并隐藏起来在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？其实我只是把滚动条通过定位把它隐藏了起来。演示下面给一个简化版的代码 · <div class="outer-container"> <div class="inner-container"> ...... </div> </div> .outer-container{ width: 360px; height: 200px; position: relative; overflow: hidden; } .inner-container{ position: absolute; left: 0; top: 0; right: -17px; bottom: 0; overflow-x: hidden; overflow-y: scroll; } 演示这个代码巧妙的向右移动了17个像素，刚好等于滚动条的宽度。这个值是我手动调试得来的

iScroll 4 特性和参数概要

阅读更多关于 iScroll 4 特性和参数概要

iScroll 4还包括如下的特性：（1）缩放（Pinch/Zoom）（2）拉动刷新（Pull up/down to refresh）（3）速度和性能提升（4）精确捕捉元素（5）自定义滚动条常用的参数如下： hScroll false 禁止横向滚动 true横向滚动默认为true vScroll false 精致垂直滚动 true垂直滚动默认为true hScrollbar false隐藏水平方向上的滚动条 vScrollbar false 隐藏垂直方向上的滚动条 fixedScrollbar 超出了scroller的边界滚动条是否收缩。Android上为true， iOS上为false fadeScrollbar false 指定在无渐隐效果时隐藏滚动条 hideScrollbar 在没有用户交互时隐藏滚动条默认为true bounce 启用或禁用边界的反弹，默认为true momentum 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候非常有用 lockDirection false取消拖动锁定， true拖动只能在一个方向上（up/down 或者left/right）通用方法：（1）refresh 在DOM树发生变化时，应该调用此方法（2）scrollTo() 滚动到某个位置 eg: myscroll.scrollTo(0,10,200

订阅 iscroll