html - 溢出：隐藏属性在 iphone、ipad 上不起作用 Jquery 垂直滑块

Question

我必须制作一个灯泡形状（即使是椭圆也可以）垂直滑块的原型。问题是，当我拖动滑块时，它会以矩形方式增长，因此在 iphone 和 ipad 上不会采用椭圆形（因为它是父元素）。我已经能够添加触摸手势，但属性溢出：隐藏似乎无法正常工作。

Answer 1

给你的滑块容器边框半径，而不是添加溢出：隐藏。它适用于 iOS 和 Android：

.container {
width: 100%; /* Your slider width, percent or pixels... */
height: 100%; /* Your slider height*/
border-radius: 100%; /* Circle or ellipse, depends of parent element */
overflow: hidden; /* Crop content to border */
background: yellow; /* Irrelevant */
position: relative; /* Takes control of inner elements, could be irrelevant too */
}

它里面的所有东西都将被裁剪到边界。