開發(fā)中遇到一個需求，大概是實現(xiàn)仿抖音的視頻播放頁面彈出評論區(qū)悠咱，下拉回彈等效果蒸辆，開始用的定位，利用滾動條的高度定位計算析既，結果是在蘋果手機上運行的還可以躬贡，但是在安卓手機上體驗效果不是很流暢，后決定用transform 中的 translateY屬性眼坏，開發(fā)時參考了網(wǎng)上的一篇文章拂玻，但是由于整理這個筆記的時候離當時開發(fā)過去了很久，那篇文章鏈接我搜索不到了宰译，所以沒有附...
下面的代碼可以直接拷貝到html里運行看效果檐蚜，我開發(fā)時是用vue寫的，這是為了讓大家最快速看到符不符合自己的需求整理的沿侈。
html
<div class="dragwrap">
<!-- 從這里 開始是可以拖拽的區(qū)域 -->
<div class="dragbox" ontouchstart="dragStart(event)" ontouchmove="dragMove(event)" ontouchend="dragEnd(event)">
<!-- 這里是固定的title闯第，比如xx條評論 -->
<div class="title" ontouchstart="titleStart(event)" ontouchend="titleEnd(event)"> title </div>
<!-- 這里是可滾動的評論區(qū)域 -->
<div class="scroll">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</div>
</div>
</div>
css
body,html{
background-color: rgba(0, 0, 0, 1);
}
.dragwrap {
position: fixed;
bottom: 0;
left: 0;
z-index: 491;
width: 100%;
height: 600px;
}
.dragwrap .dragbox {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 14px 14px 0 0;
background-color: pink;
}
.dragwrap .dragbox .title {
text-align: center;
line-height: 44px;
}
.dragwrap .dragbox .scroll {
height: 100%;
overflow: scroll;
border-top: 1px solid #fff;
}
.dragwrap .dragbox .scroll ul {
padding-bottom: 44px;
}
.dragwrap .dragbox .scroll ul li {
padding: 20px;
}
js
let el, scroll;
let startY = null,
scrolling = false,
newY = null,
isTitle = false;
open();
function titleStart() {
isTitle = true;
}
function titleEnd() {
isTitle = false;
}
// 拖拽開始
function dragStart(e) {
let ev = e.touches ? e.touches[0] : e;
startY = ev.clientY; // 最開始的startY是手指觸摸到的clientY（相對于瀏覽器y軸的位置）
el.style.transition = null;
}
function dragMove(e) {
if (startY == null) {
return;
}
let ev = e.touches ? e.touches[0] : e;
if (scroll.scrollTop <= 0 || isTitle) { // 拖拽標題 或者 此時可滾動區(qū)域沒有滾動高度
let fs = false;
if (scrolling) { // 滾動結束，正好停在沒有滾動高度的情況缀拭，重新賦值
startY = ev.clientY;
scrolling = false;
fs = true;
}
newY = ev.clientY - startY;
if (newY < 0) {
newY = 0;
}
el.style.transform = `translateY(${newY}px)`;
if (!fs && newY > 0 && e.cancelable) {
e.preventDefault();
}
} else {
// 有滾動高度
scrolling = true;
newY = ev.clientY - startY;
}
}
function dragEnd(e) {
el.style.transition = `transform 0.3s`;
if (scroll.scrollTop <= 0) {
if (newY && newY > el.offsetHeight / 2) {
close();
} else {
el.style.transform = 'translateY(0)';
}
} else {
el.style.transform = 'translateY(0)';
}
startY = null;
newY = null;
}
function open() {
el = document.querySelector('.dragbox');
scroll = document.querySelector('.scroll');
el.style.transition = null;
el.style.transform = `translateY(${el.offsetHeight}px)`;
setTimeout(function () {
el.style.transition = `transform 0.3s`;
el.style.transform = 'translateY(0)';
}, 20);
}
function close() {
el.style.transition = `transform 0.3s`;
el.style.transform = `translateY(${el.offsetHeight}px)`;
setTimeout(function () {
// 關閉頁面
}, 100);
}
