Rumah > Artikel > hujung hadapan web > 如何解决Safari滚动慢，横向选项卡滚动缓慢的问题
如何解决Safari滚动慢，横向选项卡滚动缓慢的问题
- 一个新手asal
- 2017-10-08 09:33:131926semak imbas
1. 解决方法
在需要滚动的元素下添加-webkit-overflow-scrolling: touch;
举个栗子(直接粘贴可用)：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>隐藏横向滚动条</title>
<style>
* {
margin: 0;
padding: 0;
}
.cover {
width: 100%;
overflow: hidden;
}
.father {
width: 100%;
padding: 0 10px;
background-color: #ff630c;
overflow-x: auto;
margin-top: -30px;
padding-bottom: 30px;
-webkit-transform: translateY(30px);
transform: translateY(30px);
box-sizing: border-box;
}
.son {
width: 500%;
padding-bottom: 10px;
}
.show {
width: 19%;
height: 60px;
background-color: #f00;
float: left;
margin-right: 5px;
text-align: center;
}
.second {
width: 100%;
height: 50px;
background-color: #eee;
z-index: 100000;
}
</style>
<style>
.father2 {
overflow-x: scroll;
width: 100%;
position: relative;
top: 10px;
margin-top: -10px;
-webkit-overflow-scrolling: touch;
}
.son2 {
width: 500%;
padding-bottom: 10px;
}
.show2 {
display: inline-block;
vertical-align: middle;
letter-spacing: -99999px;
text-align: center;
width: 19%;
margin-right: 10px;
height: 50px;
background-color: #f00;
}
</style></head><body>
<p class="cover">
<p class="father">
<p class="son">
<p class="show">1</p>
<p class="show">2</p>
<p class="show">3</p>
<p class="show">4</p>
<p class="show">5</p>
</p>
</p>
</p>
<p class="cover">
<p class="father2">
<p class="son2">
<p class="show2">1</p>
<p class="show2">2</p>
<p class="show2">3</p>
<p class="show2">4</p>
<p class="show2">5</p>
</p>
</p>
</p>
<p class="second"></p></body></html>二、原因
横向滚动慢，是因为Safari原生支持-webkit-属性，但是默认使用的是浏览器中的渲染行为，所以滑动的时候回卡顿。但是使用这个overflow-scrolling属性以后，会创建一个原生的滚动选项卡，native-scrolling控件，因为滑动的程度会很流畅~~~~至于什么原因，可能就需要熟悉IOS的同学探究一下原生控件咯.
兼容性： IOS5.0 or later.
Atas ialah kandungan terperinci 如何解决Safari滚动慢，横向选项卡滚动缓慢的问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何用nodejs实现聊天功能Artikel seterusnya：如何实现侧滑功能