(点击上方公众号，可快速关注)作者：IMWEB - coverguo网址：http://imweb.io/topic/560bc3e086225在业务中，页面滚动的场景十分常见，因此对于滚动的充分了解，可以让我们提高开发的效率！滚动的几种场景只有window窗体滚动内滚动布局窗体滚动+DIV内滚动这时候，台下观众会问，什么是内滚动布局，什么是window滚动呢？让我们来了解下哈只有window窗体滚动即页面只含有浏览器窗体默认的滚动条，窗体滚动条随页面内容而不断增长。如手Q吃喝玩乐的站点首页， 在android机上就是使用window滚动内滚动布局什么是内滚动布局呢？ 个人认为，内滚动布局就是主滚动条是在页面内部，而不是浏览器窗体上的布局。 故内滚动布局是相对传统的window窗体滚动而言的。（具体为什么ios上和android上会使用不同的滚动方式，可以去了解下=。=）内滚动布局什么时候会使用了？ios 页面顶部带有fixed输入框（解决软键盘弹出导致页面错位的问题）例如，手Q吃喝玩乐的站点首页， 在ios机上便是内滚动布局桌面软件或者客户端，如群活动管理系统也有经常使用窗体滚动+DIV内滚动这种场景就是，两者都会出现，故计算滚动时最为复杂。滚动计算基础知识由于不同浏览器其窗体滚动条的属性获取方式有所差异，故考虑兼容性，我们假设使用了场景是移动到，并且使用了zepto的库首先，我们想要更好的操作控制条，需了解两个地方滚动条属性滚动条调用方法var $scrollTarget = $(&.ui-page&);//若为控制window滚动条var currenY = $(document.body).scrollTop()； //当前window纵向滚动的位置var currenX = $(document.body).scrollLeft()； //当前window横向滚动的位置var Y = 想滚动到的垂直位置；var X = 想滚动到的水平位置；$(window).scrollTop(Y)；$(window).scrollLeft(X)；//若为页面内节点的滚动条var currenY =$scrollTarget.scrollTop()； //当前scrollTarget纵向滚动的垂直位置var currenX = $scrollTarget.scrollLeft()； //当前scrollTarget横向滚动条的位置$scrollTarget.scrollTop(Y)；$scrollTarget.scrollLeft(X)；我们可以发现 在这里window滚动比较特殊其获取滚动属性是用 document.body这个对象，而调用滚动条滚动方法是用window的对象（不同浏览器其获取浏览器窗体滚动条的方式也存在着差异，大家可以去了解下）接下来，我们了解下几个重要的属性值//当前window可视内容区域宽高: window.innerWidthwindow.innerHeight//浏览器滚动条偏移值:$(document.body).scrollTop();//节点offset值$(&#div&).offset().top;$(&#div&).offset().left;//节点的宽高$(&#div&).height();$(&#div&).width();//节点的滚动条偏移值$(&#div&).scrollTop();现在我们知道如何调用滚动条到指定的位置和获取滚动条偏移值，那么我们来做一个需求把假设是这个页面需求描述 ： 希望通过点击按钮，使绿色区域的item，能够定位到屏幕中间这种需求很常见吧~那么我们先分析下页面， 可以从页面中看出，这个是一个内滚动布局单页页面。//相信我们js代码就是这样写的var itemHeight = 每个item的高度var itemIndex = 指定item的下标(1, 2,3 ...)var rightPosY =
itemHeight * itemIndex<span class="crayon-h" style="border: 0 margin: 0 padding: 0 font-size: inherit ! font-family: height: inh前端大全(FrontDev)　
　文章为作者独立观点，不代表微头条立场
的最新文章
分页是一个很简单，通用的功能。作为一个有经验的前端开发人员，有义务把代码中类似这样公共的基础性的东西抽象出来，一来是改善代码的整体质量，更重要的是为了将来做类似的功能或者类似的项目，能减少不必要的重复工作量。Underscore.js 是一个由 Jeremy Ashkenas 开发的 JavaScript 库，它提供了许多作为开发者的我们在开发 Web 项目所需要的实用功能。今天我们来看一看 TypeScript，它是一种可以编译成 JavaScript 的编程语言，是为构建大型复杂应用程序的开发者们而设计的。所谓单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。曾有人调侃，设计模式是工程师用于跟别人显摆的，显得高大上；也曾有人这么说，不是设计模式没用，是你还没有到能懂它，会用它的时候。说到 React 组件，肯定离不开组件的 props 和 state，我们可以在 props 和 state 存放任何类型的数据，通过改变 props 和 state，去控制整个组件的状态。W3C 使用特定的语法来定义所有可能在 CSS 属性中使用的值。如果你曾经看过 CSS 规范，你可能已经见过这种语法的使用 – 比如 border-image-slice 语法。用 CSS3 绘制你需要的几何图形。圆形，思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.卤煮在公司之初接触到的是一个微信APP应用。前端技术采用的是Backbone+zepto等小型JS类库。在项目开发之初，这类中小型的项目采用这两种库可以满足基本的需求。算起来已经足足两个半月没有更新文章，这段时间过得比较忙：夜间跑步计划、卖房买房以及工作上各种事情都凑到一块了。实际上，最近也并没有忙到完全抽不出时间写博客这种地步，根本原因可能还是变懒了，这样不好。那天和boss聊天，不经意间提到了Meteor，然后聊到了WebSocket，然后就有了以下对话，不得不说，看问题的方式不同，看到的东西也会大不相同。在前两章，为了方便调试，我们写了一个非常简单的 jQuery.fn.init 方法JavaScript 的格局日新月异，网站和应用的依赖关系也随之而变。这篇文章适合那些大量使用 script 标签来加载 JS 的程序员，随着网页数目增多和项目规模的扩大，他们感觉到依赖管理变得越来越笨重。无论编码能力如何，我们都会犯错。不仅自己代码中会有 bug，多数的 web 应用是由团队创建的，所以队友和你一样，都有可能犯错。此外，接手遗留代码意味着同时继承了其它团队的 bug。在此情况下，调试技巧就派上用场了。Node.js 让 JavaScript 编写服务器端应用程序成为可能。它建立在 JavaScript V8运行时之上，所以它很快。最初，它旨在为应用程序提供服务器环境，但是开发人员开始利用它来创建工具，帮助他们本地的任务自动化。我们从一些小测试开始。以下情况都会弹出什么结果？由于最近做了一些页面的动画效果，之前经验不多，这次做的过程中碰到些问题，加之很早前就阅读过一篇很好介绍动画的博客《关于动画，你需要知道的》，来自十年踪迹，所以就思考了一些关于动画的基本原理的问题，比如本文这个。HTTP 协议是互联网的基础协议，也是网页开发的必备知识，最新版本 HTTP/2 更是让它成为技术热点。不看不知道，一看吓一跳，已经整整一个月没有更新 underscore 源码解读系列文章了。前面我们已经完成了 Object ，Array，Collection 上的扩展方法的源码剖析，本文开始来解读 Function 上的扩展方法。回想n年前刚写前端的时候，在处理一个’鼠标hover切换背景图会闪’的问题时，将两张背景图合成一张图片，顺利解决问题。这应该是我第一次用到雪碧图的情况。受到好文《Web开发的发展史》（英文）激发的灵感，写下我对web开发技术的认识。
大学时候，上机还得换卡穿拖鞋，Novell的网络是很神奇的，然而更神奇的是通讯原理老师半神秘的讲他上 InternetArunr 把过去 15 年以来，Web开发从最初的纯 HTML 到 CGI、PHP\JSP\ASP、Ajax、Rails、NodeJS 这个过程简要地进行了介绍。Arunr 计划把这个作为一个大纲，接下来把每一部分详细地写点东西。看完 Collection Functions 部分的源码，首先迫不及待想跟大家分享的正是本文主题 —— 数组乱序。这是一道经典的前端面试题，给你一个数组，将其打乱，返回新的数组，即为数组乱序，也称为洗牌问题。在日常的前端开发中，我们会遇到 LESS/SASS 编译、CSS 前缀自动补全 、CSS 压缩、 图片压缩、JS 合并压缩、布署发布 等各种各样的操作。通常，我们都会根据实际情况定制一个 流程 性的工具来实现所有常规的功能underscore 给数组（以及 arguments，这里特别说明下，underscore 的数组扩展方法，同样适用于 arguments）增加了 20 个扩展方法本篇文章并没有单纯的罗列出前端开发涉及到的技术栈，而是探寻这些技术栈背后的『秘密』，适合初学者以及想要了解这些『秘密』的阅读者。CSS可以修改图片的颜色，没错，可以，眼见为实！上面的不是很黑的是原始图标，是个PNG图片，下面这个是可以赋色的在过去的几年里，网站进化成了复杂的网页应用。曾经的互联网只涉及到简单的商业信息展现，而如今，看看 Facebook、Slack、Spotify 以及 Netflix，互联网正在改变你的社交和生活方式。最近在研究页面渲染及web动画的性能问题，以及拜读《CSS SECRET》（CSS揭秘）这本大作。本文主要想谈谈页面优化之滚动优化。最近开始看 underscore源码，并将 underscore源码解读 放在了我的 2016计划 中。
阅读一些著名框架类库的源码，就好像和一个个大师对话，你会学到很多。为什么是 underscore？对 JavaScript 程序员来说，处理回调是家常，但是处理层次过深的回调就没有那么美好了，下面的示例代码片段用了三层回调，再补脑一下更多层的场景，简直是酸爽，这就是传说中的回调地狱。以前看过一套 JavaScript 题目，借花献佛拿出来分享一下。附带了自己的理解和答案。有争议的地方，欢迎大家指出和讨论。writing-mode这个CSS属性，我们是不是很少见到，很少用到！我们往往称不常见的东西为“生僻”，就像是不常见的文字我们叫“生僻字”，因此不常见的CSS属性，我们可以叫做“生僻属性”关于 JavaScript，就算什么都不记得了，也请牢记这一点：它是阻塞式的。想象一下，你的浏览器是靠一个神奇的小精灵来运行的。Backbone中主要的业务逻辑位于Model和Collection，上一篇介绍了Backbone中的Model，这篇文章中将主要探讨Collection的源码。ECMAScrip 6 之前，JavaScript 是天生模块化缺失的，代码之间隔离最基本的单位是函数，通常 JavaScript 的模块化也是采用函数来实现。JavaScript 采用词法作用域（lexical scoping），函数执行依赖的变量作用域是由函数定义的时候决定，而不是函数执行的时候决定。无线页面本就分秒必争，更不用说当我们在无线页面中使用动画的时候。不管是css动画还是canvas动画，我们都需要时刻小心着，并且有必要掌握页面性能的基本分析方法。工作中可能会用到的小工具，在此记录一下。可以实现的功能有：本地http服务器，页面实时刷新，可以模拟ajax请求之前学习 react+webpack ，偶然路过 webpack 官网 ，看到顶部的 LOGO ，就很感兴趣。最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。JavaScript 可能是迄今为止最被误解的语言，它包含的许多美妙设计被其同样包含的糟糕设计所淹没，总体上给人的印象是一种没有做好充分设计的、稍显混乱的玩具语言。现在我们再重新梳理一下语言的基本特性，仔细分辨哪些是好的、哪些是坏的。上篇文章中，我介绍了 HTTP 协议中的 Accept-Encoding 和 Content-Encoding 机制。它可以很好地用于文本类响应正文的压缩，减少网络数据的传输，已被广泛使用。在 《一次 Node.js 应用内存暴涨分析》中，我们处理了一个 Node.js vm 引发的内存泄漏问题，处理过程也是比较艰辛。上一次我们简单的谈了一下font set和一些要注意的基本问题。今天我们继续字体这一话题，深入讲讲上次提到的“通用字体族”。首先是最常用的 serif 和 sans-serif 这两个通用字体族。性能优化一直是前端工作中十分重要的一环，都说从 10 到 1 容易，从 1 到 0 很难。而随着前端技术的飞速发展，没有什么技术或者法则是金科玉律一沉不变的。很佩服那些勇于挑战权威，推陈出新的勇者，是他们让我们的技术不断的变革更加的卓越。在传统MVC框架模式中，Model承担业务逻辑的任务。Backbone作为一个mvc框架，主要的业务逻辑交由Model与Collection来实现。Model代表领域对象，今天主要学一下Model源码中几个重要的函数。本文将对 jQuery each() 函数作一个比较全面的介绍。 each() 函数是 jQuery 中最重要也是最常用的函数之一。通过本文你将明白为什么 each() 函数如此大放异彩，同时还将详细介绍如何使用 each() 函数。本文介绍一个jquery的小技巧，能让任意组件对象都能支持类似DOM的事件管理，也就是说除了派发事件，添加或删除事件监听器，还能支持事件冒泡，阻止事件默认行为等等。CSS 动画已经存在很多年了，使用恰当可以很好地提高网站的用户体验，也正是由于其容易使用，就很可能出现性能低下的动画，从而降低了整个页面的运行效率。从春节回来开始直到现在，公司就像开了闸的西湖水一样进行着新陈更替，可以说开发团队算是重组了。眼看着身边发生这种情况，虽然没有什么想法但还是有了点想法，所以想写篇文章阐述一下。FrontDev分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯热门文章最新文章FrontDev分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯CSS 1em 什么意思？CSS懂一点的人进来看下_百度知道从零开始，细致介绍CSS的语法规则，div+css布局的思路和方法比较。
共 20 小节 (4 小时)1318 人已学习课程QQ群：
建站培训班4期正在招生中报名截止时间：9月30日咨询客服QQ：
学会掌握：能看懂网页源代码，并可用div+css进行网页布局
适合人群：从事网站建设，模板开发和SEO行业的人员
&#xe63a;章节1： CSS基础知识与核心概念
&#xe63a;章节2： 布局专题讲解
&#xe63a;章节3： CSS与其他技术
&#xe63a;章节4： div+css综合实践
魔客吧站长
2 个课程 3218 位学员
七年的网站建设，模板设计工作经验，并拥有丰富的网站运营，网站优化经验。于2010年创建魔客吧网站，至今已经发展成为国内最大的模板分享平台。为广大网站建设从业者提供了方便和帮助。
魔客老师的其他课程
魔客吧致为于打造一个优秀的建站资源共享学习平台，为广大网友提供一个良好的交流学习环境。由于大多数会员基础比较差，魔客吧特别制作开通了在线视频课程，让基础差甚至零基础的会员也能轻松学会网站建设与开发。所有讲师均具有本领域6年以上实战经验，我们注重实战和实用，但在演说技巧方面存在诸多不完美的地方，敬请多多谅解。
1318人次参加学习您的举报已经提交成功，我们将尽快处理，谢谢！
大家还关注&css3 开门
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Struggling Youth
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
ZJU_BrianShen
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
企鹅学哲理
在Fork了此代码
猎隼丶止戈
在Fork了此代码
only简单的
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
qustxiaopig
在Fork了此代码
这个不好说
在Fork了此代码
在Fork了此代码
泛着涟漪的生命
在Fork了此代码
在Fork了此代码
丨Star丶总裁
在Fork了此代码
在Fork了此代码
equilibrium_sleeper
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
右边有棵草
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
桔子和柠檬都很酸
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
李童鞋1102
在Fork了此代码
在Fork了此代码
微信公众平台开发教程
在Fork了此代码
diyang笛扬
在Fork了此代码
麦田稻草人
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Jiangxinxin
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
在Fork了此代码
Ta的最近动态
发布了代码 ()
Fork了代码
发布了代码 ()
发布了代码 ()
Ta发布的其他代码(91)
&&0评/0Fork，更新于2年前。
&&0评/2Fork，更新于1年前。
&&0评/0Fork，更新于1年前。
&&0评/0Fork，更新于1年前。
&&0评/0Fork，更新于1年前。