麻烦老师检查一哈，还有好像我的滚动条没显示出来？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
#div {
width: 50px;
height: 50px;
background: pink;
}
body {
height: 1000px;
background: lightblue;
}
</style>
<body>
<div id="div"></div>
<script>
var divEl = document.getElementById('div');
drag(divEl, {
x: true,
y: true
})
function drag(el, options) {
var startLocation = {};
var diffLocation = {
x: 0,
y: 0
};
var isMove = false;
el.addEventListener('touchstart', touchStart, false);
el.addEventListener('touchmove', touchMove, false);
el.addEventListener('touchend', touchEnd, false);
var viewPortWidth = document.documentElement.clientWidth;
elWidth = el.offsetWidth,
maxMoveWidth = viewPortWidth - elWidth,
elHeight = el.offsetHeight,
bodyHeight = document.body.offsetHeight,
maxMoveHeight = bodyHeight - elHeight;
function touchStart(event) {
var thEv = event.changedTouches[0];
startLocation.x = thEv.pageX;
startLocation.y = thEv.pageY;
}
function touchMove(event) {
isMove = true;
var thEv = event.changedTouches[0];
var currentLocation = {};
var moveLocation = {};
currentLocation.x = thEv.pageX;
currentLocation.y = thEv.pageY;
var moveLocationX = currentLocation.x - startLocation.x + diffLocation.x;
var moveLocationY = currentLocation.y - startLocation.y + diffLocation.y;
if (moveLocationX > maxMoveWidth) {
moveLocationX = maxMoveWidth;
} else if (moveLocationX < 0) {
moveLocationX = 0 + 'px';
}
if (moveLocationY > maxMoveHeight) {
moveLocationY = maxMoveHeight;
} else if (moveLocationY < 0) {
moveLocationY = 0 + 'px';
}
moveLocation.x = options.x ? moveLocationX : 0;
moveLocation.y = options.y ? moveLocationY : 0;
move(el, moveLocation);
}
function touchEnd() {
if (!isMove) return;
var thEv = event.changedTouches[0];
diffLocation.x += thEv.pageX - startLocation.x;
diffLocation.y += thEv.pageY - startLocation.y;
if (diffLocation.x > maxMoveWidth) {
diffLocation.x = maxMoveWidth;
} else if (diffLocation.x < 0) {
diffLocation.x = 0 + 'px';
}
if (diffLocation.y > maxMoveHeight) {
diffLocation.y = maxMoveHeight;
} else if (diffLocation.y < 0) {
diffLocation.y = 0 + 'px';
}
isMove = false;
}
}
function move(el, options) {
el.style.transform = 'translate3d(' + options.x + 'px,' + options.y + 'px,0)';
event.preventDefault();
}
</script>
</body>
</html>
正在回答
你好同学，浏览器滚动条默认是不会隐藏的，可能是你的浏览器出现问题。可以重启一下电脑，或者换360等其他浏览器测试一下哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星