JavaScript滾動功能不會觸發

Question

我只想在頁面加載后觸發一個函數。

似乎我的代碼中有錯誤，但我無法弄清楚...猜猜我還是有點笨拙...

<div class="text-one">
   <p id="hi" onscroll="myFunction()"> Hi, </p>
</div>

function myFunction () {
    document.getElementById("hi").style.color = "blue";
}

Answer 1

<div class="text-one">
   <p id="hi" onscroll="myFunction()"> Hi, </p>
</div>

此代碼表示“當p滾動時，執行myFunction（）”。 除非您在p標簽中包含太多文本以至於用戶希望在div中滾動，否則這沒有什么意義。

代替：

window.addEventListener('scroll', function() {
   myFunction()
});

現在我們有了一個偵聽器，該偵聽器在用戶在窗口中滾動時進行偵聽

並非應從html標簽內部調用每個函數。 特別是當上下文不匹配時

Answer 2

您可以這樣，首先必須具有可滾動元素： http : //codepen.io/bra1N/pen/bZOXbG

JS：

function myFunction () {
    document.getElementById("hi").style.color = "blue";
} 

CSS：

#hi{
  display: block;
  overflow: scroll;
  height: 400px;
}

Answer 3

首先，您需要使用以下CSS來確保元素可滾動。

p#hi
{
   border: 1px solid black;
   width: 200px;
   height: 100px;/*need to specify element height*/
   overflow: scroll;
}

需要內容來使高度超過您在CSS中定義的高度。 在這些之后，您的代碼就可以了:)

請參考約翰在您的問題中提到的鏈接 。