HTML 想隐藏滚动条,然后鼠标滚轮能滚动页面

HTML 想隐藏滚动条,然后鼠标滚轮能滚动页面,第1张

方案1:设置2个DIV层,A1外层,A2内层,A2的宽度设置比A1宽20px左右(大概就是滚动条的宽度),A2设置为可见滚动条,A1设置为隐藏滚动条。

可以滚动,但是看不到滚动条。前提是你必须在页面载入的时候将鼠标焦点对准到A2层上,如果焦点在A2层外,滚轮和下建无效。这个可以用js很容易做到。

方案2:直接把滚动条颜色设置和背景层一样。

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>跟随鼠标移动的十字架坐标</title>

<style>

<!--#leftright, #topdown{position:absolute

left:0top:0width:1pxheight:1pxlayer-background-color:red

background-color:redz-index:100font-size:1px}-->

</style>

<style>

<!--#leftright, #topdown{position:absoluteleft:0

top:0width:1pxheight:1pxlayer-background-color:red

background-color:redz-index:100font-size:1px}-->

</style>

</head>

<body>

<div id="leftright" style="width:expression(document.body.clientWidth-2)"></div><div

id="topdown" style="height:expression(document.body.clientHeight-2)"></div>

<script

language="JavaScript1.2">

<!--

if (document.all&&!window.print){

leftright.style.width=document.body.clientWidth-2

topdown.style.height=document.body.clientHeight-2

}

else if (document.layers){

document.leftright.clip.width=window.innerWidth

document.leftright.clip.height=1

document.topdown.clip.width=1

document.topdown.clip.height=window.innerHeight

}

function followmouse1(){

//move cross engine for IE 4+

leftright.style.pixelTop=document.body.scrollTop+event.clientY+1

topdown.style.pixelTop=document.body.scrollTop

if (event.clientX<document.body.clientWidth-2)

topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1

else

topdown.style.pixelLeft=document.body.clientWidth-2

}

function followmouse2(e){

//move cross engine for NS 4+

document.leftright.top=e.y+1

document.topdown.top=pageYOffset

document.topdown.left=e.x+1

}

if (document.all)

document.onmousemove=followmouse1

else if (document.layers){

window.captureEvents(Event.MOUSEMOVE)

window.onmousemove=followmouse2

}

function regenerate(){

window.location.reload()

}

function regenerate2(){

setTimeout("window.onresize=regenerate",400)

}

if ((document.all&&!window.print)||document.layers)

//if the user is using IE 4 or NS 4, both NOT IE 5+

window.onload=regenerate2

//-->

</script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6309743.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-20
下一篇 2023-03-20

发表评论

登录后才能评论

评论列表(0条)

保存