css3 滚动不流畅 |高德js 和css 冲突

body {
overflow: auto;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
background-color: #000;
}

以上代码是一个常见的设置滚动条的方法。但是，当页面中有大量内容需要滚动时，依然会出现卡顿、掉帧的情况。这是因为浏览器默认的渲染方式是同步渲染，即一次渲染完成后再去渲染下一个部分。这种方式会出现卡顿、掉帧等现象。

那么如何解决滚动不流畅的问题呢？下面介绍几种方法:

1. 使用will-change属性。

div {
will-change: transform;
}

will-change属性可以指定元素在未来的某个时间段内会发生的变化，以便浏览器预测并优化渲染。

2. 使用transform: translateZ(0)。

div {
transform: translateZ(0);
}

这种方法可以利用硬件加速，将滚动变得更加顺畅。

3. 使用考虑渲染性能的JavaScript。

大家可以使用一些JavaScript库来优化滚动性能，如iscroll、better-scroll等，它们会根据不同的设备和浏览器自动选择最佳的渲染方式并且支持更自由的手势操作。不过在使用这些库时，大家要注意内存泄漏、卡顿等问题。

以上就是解决CSS3滚动不流畅的方法，大家在开发中可以根据实际情况来选择使用哪种方法。希望这篇文章对大家有所帮助。