㈠ 什么是网页设计中的滚动设计如何进行滚动设计
曾经的网站设计“禁忌”已经成为最受欢迎的技术之一，下面将讨论一些滚动设计的利弊，并分析一些技巧。
滚动设计适合你的产品吗？
每一种设计技巧和工具，都有喜欢这个概念的人和那些讨厌它的人。在大多数情况下，任何一方都不是本质上对错的；因此，在处理此类项目之前，权衡所有注意事项非常重要。
滚动的优点：
鼓励互动 – 随着不断变化的元素不断刺激，它可以是一种有趣的讲故事方法，鼓励用户交互 - 尤其是高雅执行的视差滚动。
更快 – 长滚动比单击复杂的导航路径更快，并且不会减慢或限制用户体验。如Interaction Design Best Practices中所述，对时间的感知通常比实际时间的流逝更重要。
吸引用户 – 易用性可促进交互性，增加现场时间。对于无限滚动网站尤其如此，您可以在其中帮助用户发现他们可能甚至没有想到的相关内容。
响应式设计 – 页面设计在具有不同屏幕大小和功能的设备之间可能会变得复杂，但滚动有助于简化差异。
手势控制 – 滚动似乎与触摸有着有机的联系，因为向下轻扫比在屏幕上不同区域重复点击要自然得多。用户（尤其是移动设备）通常接受这一方式来显示信息。
令人愉快的设计 – 不需要多次单击即可获得更快的交互，从而获得更类似于应用或游戏的用户体验。
滚动的缺点
固执用户 –一些用户总是毫无理由地去抵制改变。尽管如此，该技术现在非常普遍（特别是在移动体验期间），可以说大多数用户都习惯了这种技术。
SEO缺点 - 只有一个页面可能对网站的SEO产生负面影响。
迷失方向 - 滚动和内容之间的断开可能会使用户感到困惑或脱节。
导航困难 – "返回"页面上的先前内容可能会很尴尬。为了对付这种情况，您可以创建一个持久的顶部导航，其中每个部分都锚定到页面。
网站速度 – 视频或图像图库等大量内容可能会降低网站速度，尤其是视差滚动网站，它们依赖于 Javascript 和 jQuery
没有页脚 – 使用无限滚动网站，我们建议使用简约的"粘性"页脚，这样您就不会牺牲可导航性。否则，用户可能会因为页面底部缺少进一步的导航而感到困惑。
撇开优点和缺点不谈，某些类型的网站更适合长滚动设计。更长的滚动网站更适合……
...包含很大一部分移动流量（大多数用户）
...包括频繁更新或新内容（如博客）
...有很多信息以单一的方式呈现，以便理解（如信息图）
...不包含富媒体，因为这可能导致负载时间的消耗
滚动最佳实践
长滚动、视差效应和类似机制在设计领域中仍然比较新（约4年历史），但仍从试错经验中可以获取一些基本的最佳实践。
从 2015 和 2016 的 Web 设计趋势总结，以下是成功实现长滚动的一些日常技巧。
不用担心短滚动和长滚动交替使用。 让内容决定滚动长度，而不是反过来。 使用短滚动主页和长滚动着陆页（如产品，旅游等）非常好（并且非常受欢迎）。
考虑粘性导航，以便用户始终可以快速"返回"或从滚动中的元素跳转到另一个元素。
将滚动与设计元素或工具结合，以便每个用户都能快速了解网站的工作方式。箭头、动画按钮或类似的用户界面工具是帮助用户确定下一步操作的有趣且简单的方法。有些网站甚至包含一个小按钮，其中包含"滚动更多"或"开始"等说明，来提高页面的导航性。
明确区分滚动点击和其他CTA元素，以便网站获得所需的交互。
做一些研究，看看用户如何与滚动交互。例如，在 Google 分析中，可以打开"网页分析"选项卡，查看屏幕下方（第二屏及之后）用户的点击数。然后，你可以根据需要调整设计。
不要过分。长滚动并不意味着 500 页的连续内容 - 长滚动也可以很简单。讲述你的故事，然后适可而止，不要喋喋不休 。
专注于用户目标，并接受即使是无限滚动网站也不是真正无穷无尽的。 创建长滚动网站时，要了解用户仍需要方向感（当前位置）和导航（其他可能的路径）。
包括有助于在滚动中定位用户的视觉提示，例如左下方用于“七种类型的摩托车骑手”站点的头盔图标。
平时用墨刀设计原型时候，可以直接拖动，增加页面长度，进行滚动设计。
㈡ 前端滚动轮播实现
内容 ：实现滚动轮播-给非前凯虚端人员观看的
前言 ：轮播的具体实现有很多种方式，下或孙盯面主要讲一下我是怎么实现的。
淘宝网首页衫和轮播图
样例1-轮播原理
样例2-隐藏其他的slide只留下一个
样例3-复制头尾
样例4-无限轮播原理
样例5-去除其他slide
样例6-将项的内容改成与原始对象一致
㈢ 前端页面需要用到多处scroll滑动事件，怎么事件之间不影响
原因分析:
ios的webview 内核 设定了其在进行momentum scrolling(弹性滚动)时,会停止所有的 事件响应 及 DOM操作引起的页面渲染 (亲测),故 onscroll 不能实时响应
曾做兼容方案:
使用 ontouchmove 去替代 nscroll ,虽然能更频繁的触发事件,但是这边的项目需求是实时响应滚动事件的同时,还要对页面元素进行重定位的DOM操作,由上述原因可知,在滚动过程中,页面会停止一切关于DOM方面的操作,所以若使用 ontouchmove 去实现的话,在按住屏幕进行滑动的时候,屏幕会出现元素抖动的情况(事件触发与DOM操作间具有几十毫秒的时间差),兼容失败
使用 iscroll 的probe版本,该版本能实时探查到滚动的距离,但该钩子函数是实时去关注 requestAnimationFrame 下的状态,所以对浏览器的版本性能消耗很大,加上 react 的 DOM 操作,安卓机根本动不了,兼容失败
使用 swiper 插件,在启动 freeMode 模式时模拟原生的弹性滚动( swiper 模拟原生滚动的方案能兼容较多的安卓机型不出现bug,推荐), 因为 swiper 没有实时监听滚动位置的功能,故我监听滚动开始及结束后的事件,通过 setInterval 及一些计算去实现滚动条的监听,但因为 react 元素的变化量比较大,导致 swiper 在移动端时对父容器的计算速率达到了一个瓶颈,依旧出现很卡顿的现象,兼容失败
fallback方案,安卓端使用原生onscroll实现,ios直接加载全部子元素,毕竟ios的性能方面还是比较好的,有更好的方案后续再更.
㈣ 手机前端，左右两个div，怎么做两个滚动，就是我滚动左边的时候右边不懂，滚动右边左边不动，怎么实现
你看看这样可以实现么；
就是一个网站在浏览器里（高度足够滚动），浏览器会出现滚动条，我叫它为右边（right）的div，然后在你的网页中也有一处是出现滚动条的，我叫它为左边（left）的div，意思就是网页为大的div（右边的 right）；它里面包含着左边（left）的div；
大概意思你懂了么？
不过好像右边动 左边也会动=。=