Javascript 什么是谷歌搜索结果页面旋转木马技术？

在过去的几周里，谷歌为

堆栈溢出

结果展示了一个旋转木马，它很棒，移动平稳，但对我来说很奇怪，没有

JavaScript

更改，甚至

CSS

导致水平滚动，我找不到它

就连我也读过，但它是如此不同，它只是针对

googlechrome

，在其他浏览器中是不存在的

---

经过一些搜索和实验，我发现这个奇怪的旋转木马实际上是一个长的水平分区，带有

显示：none

滚动条，但是如何通过

抓取

和移动鼠标指针，分区滚动条移动？这是本地的chrome把戏吗？或者只是使用

JavaScript

计算水平滚动的运动？

事实上，我已经找到了我问题的答案，但我决定现在就把它贴在这里。谷歌网站开发人员使用许多性感的技巧来实现用户界面，而这个旋转木马就是其中之一，毫无疑问，这不是

DOM

操纵，而是一个简单的滚动划分。因此，分割移动非常平稳，即使拖动移动正确

滚动在一些设备中有一些固有的行为，如苹果设备或其他触摸设备，甚至微软的新笔记本电脑也有一些关于触摸滚动的功能。但是，如果我们使用一些

JavaScript

代码来处理拖动操作，那就很好了，请参见以下代码：

提示：您可以使用本机设备的水平滚动功能，如MacBook trackpad上的双指水平滚动功能，或使用单击并拖动水平移动旋转木马

var slider=document.querySelector（'.items'）；
var isDown=假；
var-startX；
左上角；
slider.addEventListener（'mousedown'，函数（e）{
isDown=真；
slider.classList.add（'active'）；
startX=e.pageX-slider.offsetLeft；
scrollLeft=slider.scrollLeft；
});
slider.addEventListener（'mouseleave'，函数（）{
isDown=假；
slider.classList.remove（'active'）；
});
slider.addEventListener（'mouseup'，function（）{
isDown=假；
slider.classList.remove（'active'）；
});
slider.addEventListener（'mousemove'，函数（e）{
如果（！isDown）返回；
e、 预防默认值（）；
var x=e.pageX-slider.offsetLeft；
var walk=（x-startX）*3；//快速滚动
slider.scrollLeft=scrollLeft-漫游；
});
@导入url(https://fonts.googleapis.com/css?family=Rubik);
身体，
html{
颜色：#fff；
文本对齐：居中；
背景：#efef；
字体系列：Helvetica，无衬线；
保证金：0；
}
.网格容器{
背景：#efef；
字体系列：“Rubik”，无衬线；
}
@支持（显示：网格）{
.网格容器{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：自动1fr自动；
网格模板区域：“页眉”“标题页脚”“主”；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.网格容器{
网格模板列：1fr；
网格模板行：0.3fr 1fr auto 1fr；
网格模板区域：“页眉”“标题”“主”“页脚”；
}
}
.表格项目{
颜色：#fff；
背景：天蓝色；
填充物：3.5em 1em；
字号：1em；
字号：700；
}
.标题{
背景色：#092a37；
网格区域：标题；
填充：1em；
}
.头衔{
颜色：#555；
背景色：#f4fbfd；
网格区域：标题；
}
梅因先生{
颜色：#9595；
背景色：白色；
网格区域：主；
填充：0；
溢出-x：滚动；
溢出y：隐藏；
}
.页脚{
背景色：5bbce4；
网格区域：页脚；
填充：0.6em；
}
.项目{
位置：相对位置；
宽度：100%；
溢出-x：滚动；
溢出y：隐藏；
空白：nowrap；
过渡：均为0.2s；
变换：比例（0.98）；
改变：转变；
用户选择：无；
光标：指针；
}
.items.active{
背景：rgba（255，255，255，0.3）；
光标：抓取；
光标：-webkit抓取；
变换：比例（1）；
}
.项目{
显示：内联块；
背景：天蓝色；
最小高度：100px；
最小宽度：400px；
利润率：2米1米；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.项目{
最小高度：100px；
最小宽度：200px；
}
}
}
a{
显示：块；
颜色：#c9e9f6；
文字装饰：下划线；
保证金：1em自动；
}
a:悬停{
光标：指针；
}
p{
文本对齐：左对齐；
文本缩进：20px；
字号：100；
}
我{
颜色：天蓝色；
}