整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
过去几个月中，微软进一步展现了对Chromium开源项目的兴趣和热情，从而为Chrome、Edge以及其他基于该项目的浏览器做出各种贡献。在最新提交的提案中，希望通过部署EdgeHTML风格的滚动特性从而让Chromium的滚动变得更加灵敏。
在最新提交的Commit中，微软希望将Impulse-style (也就是EdgeHTML-style) 滚动动画加入到Chromium浏览器中。微软表示已经将该滚动动画移植到基于Chromium的Edge Dev和Canary通道版本中。
Impulse-style滚动动画在Edge浏览器中默认处于启用状态。对于Chrome用户来说，在未来几天可以通过启用实验性Flag进行启用。微软表示Impulse-style滚动提供了更灵敏的滚动效果。鼠标滚轮的每个刻度都试图模仿实际物理滚动效果，页面滚动会先快速移动然后慢慢停下来。
此外微软正努力推荐另一项称之为“percent-based scrolling”（基于百分比的滚动）的滚动特性，允许浏览器将鼠标滚轮或者键盘滚动解释为预期滚动条的百分比，这意味着在启用该功能之后滚动体验会更加流畅。微软表示正努力将经典版Edge浏览器的优秀特性移植到Chromium平台上，而基于百分比的滚动方式只是其中之一。
SS 禁止浏览器滚动条的方法(转)
1、完全隐藏 在<boby>里加入scroll="no", 可隐藏滚动条；
<boby scroll="no">这个我用的时候完全没效果, 不知道是什么原因! 不过好多人说这么用可以, 大概是用的位置不一样吧
2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时, 不显示滚动条；反之, 则显示:
<boby scroll="auto">3、样式表方法 在<boby>里加入style="overflow-x:hidden", 可隐藏水平滚动条；加入style="overflow-y:hidden", 可隐藏垂直滚动条。
被包含页面里加入 <style> html { overflow-x:hidden; } </style> 有一段解释是这样说的：body{ overflow-x:hidden; }在标准 DTD 下是不可以的
我的问题是用这段代码解决的body{overflow-y:hidden; }
4、另一种方法
<style type="text/css"> html { overflow-x:hidden; overflow-y:hidden; } </style>5、在用ie6浏览有框架的xhtml页面的时候, 默认会水平和垂直滚动条会一起出现, 这是ie6的一个bug, 在firefox上是正常的, 出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.
对于这个bug一般有3种解决方案，
方法1: 代码：
html { overflow-y: scroll; }原理：强制显示ie的垂直滚动条，而忽略水平滚动条 优点：完全解决了这个问题, 允许你保持完整的XHTML doctype.
缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条。
方法2: 代码：
html { overflow-x: hidden; overflow-y: auto; }原理：隐藏横向滚动，垂直滚动根据内容自适应
优点：在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现.
缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候， 屏幕以外的内容会因为用户无法水平滚动，而看不到。
方法3: 代码：
body { margin-right: -15px; margin-bottom: -15px; }原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象.
优点：在视觉上解决了这个问题, 垂直滚动根据内容自适应
缺点：由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域
前端开发来说，通过动画来提升交互效果是很常见的。在很早以前，做web动画主要通过javascript或者jquery或者flash这样的手段，非常麻烦，自打有了ccs3，做动画就太方便了，只需几行css代码就可以搞定。
这里我们就演示一个常见的循环滚动效果，任务是这样：先准备一个图片，平铺到页面上充满整个屏幕，然后就让画面一直向上循环滚动，形成无边无际的感觉。
虽然可以从网上搜到一些类似的代码，但是鱼龙混杂，无关紧要的代码非常多，不够纯粹。如果要弄明白动画的原理，只有自己动手做一遍才能真正消化吃透。所以我们来一步步原创这个代码，排除所有不必要的基础样式，只说要点，3个步骤你就可以完全掌握其精髓！
第一步：布局
首先，滚动的图片需要放在一个容器里，一行html代码即可完成：
第二步：把图片放进容器
css中body的边界设为0，把容器设高度100%以充满屏幕，再调用背景图pic.png
第三部：让画面动起来
咱不做标题党，循环滚动靠的就是3行css动起来的。
先是1行 -webkit-animation属性：4个参数分别表示：动画名称scroll，1秒时长，移动速度为线性的，无限循环。
然后是对应的关键帧 @-webkit-keyframes 属性，这是自己定义的动画规则，只需写2行规则即可：
原理：动画就是画从一个地方动到另一个地方。对普通滚动效果来说，有起点和终点这两个节点的位置就够了。所以我们用0%和100%分别表示起点和终点，指定2个背景图的xy位置坐标即可。图片会在规定时间内从起点移动到终点，并循环下去，数值是负表示是向上移动。320px正好是图片的高度，这样循环的时候是无缝衔接的。
好了，最终完整的代码如下，是不是很精练呢？保存成 index.html 即可
代码写完了，还要记得在当前目录要有pic.png这个图片哦，我随便画了几笔，绝无观赏性，建议自己找个好看点的图片来代替。
现在用浏览器打开index.html即可看到效果，比较魔性的地方在于，如果你盯着看久了，关闭窗口以后会出现幻觉，仿佛整个显示器都在向上飞，哈哈！
最后我们来说说浏览器兼容性问题：
大家可能注意到了，前面那2个古怪的 -webkit-animation, @-webkit-keyframes 这里的-webkit-其实是一个前缀，animation和@keyframes才是CSS的标准属性。
当加上-webkit-后，就形成了一个针对特殊浏览器的专有属性，表示用在谷歌的chrome和苹果的safari浏览器上。此外还有-moz前缀代表针对firefox浏览器的私有属性。
所以我们在用到css3的一些特性的时候，经常使用一大堆的重复性的代码，比如我们今天的这个代码，有人会写成这个样子：
一个简单的动画就要写这么多冗余的代码，为的只是支持一些旧的浏览器，有必要吗？为什么在这个例子中我们仅仅采用了-webkit-而没有使用其它专有属性呢？
因为现在已经是2019年了！谷歌苹果的浏览器是主流，占据了绝大部分，而其它小众浏览器也大多能够兼容他们，在版本上，大部分人安装浏览器是直接下载新版本安装使用，而非找出家里陈年的老软盘、老光盘去安装，家中的老电脑也早已升级不知多少回了，所以也几乎没有机会使用低版本的浏览器了！
至于微软的IE，就更别提了，IE9以前不支持动画的，只能用js或者jquery来写动画，直到IE10才支持css动画，随后IE被放弃，主推Edge，搞了几天越来越头大干脆也放弃，现在直接使用chrome内核了，所以针对ie的兼容性除非有特殊要求已经无需考虑。
你在网上能看到的范例代码，如果有写成那么复杂臃肿的，估计也都是3-5年前发的老文，或者抄来抄去不做思考的搬砖工留下的“初学者”笔记。
我们不仿测试一下几款主流浏览器的情况看看，结论：
测试结果表明，-webkit-的写法在4款不同内核的浏览器上都能正常使用，所以我们的代码因此能得以简化。
当然，这个例子也有局限性，比如你看，只有苹果safari不支持标准写法，万一将来他改邪归正了呢？毕竟标准写法才是众望所归不是？使用针对个别浏览器的私有属性写法，虽可用但毕竟有些怪怪的，将来怎么样还很难说呢。这样看来，如果使用古老的处理办法，重复N次为每个专属浏览器各写一份代码，除了辣眼睛也真没什么错。
浏览器的兼容问题涉及面实在是非常广，三言两语还真说不完，以后会专门来讲。
*请认真填写需求信息，我们会在24小时内与您取得联系。
