CSS开发技巧个行为技巧

Question

使用overflow-scrolling支持弹性滚动\n\niOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度\n\n场景：iOS页面滚动\n使用transform启动GPU硬件加速\n\n有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题\n\n场景：动画元素(绝对定位、同级中超过6个以上使用动画)\n使用attr()抓取data-*\n\n在标签上自定义属性data-*，通过attr()获取其内容赋值到content上

Answer 1

该回答内容部分引用GPT，GPT_Pro更好的解决问题
CSS开发技巧和行为技巧有很多，在这里我将分享一些常用的技巧。

一、使用overflow-scrolling支持弹性滚动miOS页面：当非body元素的滚动操作在iOS上出现卡顿时，可以使用overflow-scrolling:touch来调用Safari原生滚动，以增加页面滚动的流畅度。

.element {
  overflow-scrolling: touch;
}

二、使用transform启动GPU硬件加速：当执行动画时，可能会导致页面卡顿，可以在特定元素中使用硬件加速来避免这个问题，比如绝对定位的元素或者同级元素超过6个以上使用动画。

.element {
  transform: translateZ(0);  /* 启动GPU硬件加速 */
}

三、使用attr()抓取data-"nwm：在标签上自定义属性data-*，然后通过attr()获取其内容赋值到content上。

<div data-name="test">test</div>

 ```css
 .element::after {  /* 抓取data-name的属性 */ 
   content: attr(data-name);  
 } 

如果回答有帮助，望采纳。