![](/img/trans.png)
[英]how do I put 2 functions together and make it work as I want in javascript and html5
[英]I want to make a message window in HTML but the javascript not work
我做了一個消息 window 當用戶向下滑動網站時會顯示一條消息,當用戶向上滑動時隱藏消息。 我參考了本教程,但它沒有按預期工作。
<html>
<body onscroll="scroll()">
<div
id="message"
style="position:fixed;left:0%;top:30%;height:20%,width:5%;border-radius:10px;background-image:linear-gradient(90deg,rgba(100,255,200,0.5),rgba(100,255,255,0.5),rgba(100,255,200,0.5));box-shadow: 10px 10px 10px 5px rgba(100,100,100,50);"
>
<p>
testmessage:
</p>
</div>
<script language="javascript">
function scroll() {
//console.log("打印log日志");實時看下效果
//console.log("開始滾動!");
}
var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) {
//第一步:先判斷瀏覽器IE,谷歌滑輪事件
if (e.wheelDelta > 0) {
//當滑輪向上滾動時
//console.log("滑輪向上滾動");
document.getElementById("message").width = 0;
document.getElementById("message").height = 0;
}
if (e.wheelDelta < 0) {
//當滑輪向下滾動時
//console.log("滑輪向下滾動");
document.getElementById("message").width = 20%;
document.getElementById("message").height = 5%;
}
} else if (e.detail) {
//Firefox滑輪事件
if (e.detail > 0) {
//當滑輪向上滾動時
//console.log("滑輪向上滾動");
document.getElementById("message").width = 0;
document.getElementById("message").height = 0;
}
if (e.detail < 0) {
//當滑輪向下滾動時
//console.log("滑輪向下滾動");
document.getElementById("message").width = 20%;
document.getElementById("message").height = 5%;
}
}
};
//給頁面綁定滑輪滾動事件
if (document.addEventListener) {
//firefox
document.addEventListener("DOMMouseScroll", scrollFunc, false);
}
//滾動滑輪觸發scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;
</script>
</body>
</html>
我想知道我的代碼有什么問題,我該如何解決。
謝謝你。
你需要調用你的scrollFunc()
添加一些高度,以便它可以滾動。
<body onscroll="scrollFunc()" style="height: 5000px;">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.