怎么通过js禁止页面滚动

JavaScript011

怎么通过js禁止页面滚动,第1张

这个要看你自己的需求是什么。如果单纯的是想在某个模块不要滚动的话直接overflow:hidden就可以。如果需要整个页面都不想要浏览器的滚动行为可以用JS阻止浏览器行为,比如:

event.preventDefault()//firefox等

event.returnValue = false//IE系列

#box1 div:hover{

animation-play-state: paused

}

animation--play-state属性指定动画是否正在运行或已暂停。

语法: animation-play-state: paused|running

paused 指定暂停动画

running 指定正在运行的动画

我写的代码,要下班了,所以就简单注释一下。鼠标经过会停止,移开鼠标会继续走。已经测试过了。另存xx.htm打开可看效果。

<script type="text/javascript">

var timer_movex

start_timer()

function start_timer(){

  timer_movex = setInterval(function() {//setInterval是js循环定时器每隔一段时间就执行一次function代码

  var x = document.getElementById('x')//获得id为x的html元素

  if(x.offsetLeft >= 800)

    x.style.left = 0//如果移动到了800的位置,则跳回左边0点重新开始移动

  else

    x.style.left = x.offsetLeft + 50//向右移动20个像素

}, 1000)//每隔1000毫秒移动一次

}

function stop_timer() {

  clearInterval(timer_movex)

}

function movex(v) {

  var x = document.getElementById('x')//获得id为x的html元素

  x.style.left = x.offsetLeft + v//移动v个像素,v为正数则向右,负数则向左。x.style.left即为左边框位置。

}

</script>

<div id="x" style="position:absolute left:500px top:100px width:100px height:100px border=1px solid #000" onmouseover="stop_timer()" onmouseout="start_timer()">

<h1>TEST</h1>

</div>

<form>

<input id="test" onclick="movex(-100)" value="点击左移" type="button"/>

<input id="test" onclick="movex(100)" value="点击右移" type="button"/>

<input id="test" onclick="start_timer()" value="start" type="button"/>

<input id="test" onclick="stop_timer()" value="stop" type="button"/>

</form>