Ошибка function is not defined, не знаю в чем проблема

Question

Вообще я хотел в начале задать другой вопрос, но когда здесь написал код, появилась ошибка: "Uncaught ReferenceError: scrollHook is not defined". Не знаю чем вызвано, вроде бы написал название функции правильно. Это я слепой что не вижу синтаксической ошибки или это что то другое? Подскажите пожалуйста

function scrollHook(offsetValue, element){
	let thisElement = document.getElementById(element);
	window.onscroll = function (){
		if (window.pageYOffset > offsetValue ) {
    
			thisElement.style.overflow = "scroll";
      
		} else if(window.pageYOffset < offsetValue){
    
			thisElement.style.overflow = "hidden";

		}
	};
};

.display{
 display: flex;
 margin-top: 250px;
}
.scroll{
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.block{
  width: 200px;
  height: 500px;
  background-color: #f6f6f6;
}

<div class="display">  
  <div class="scroll" id="block-a"> <div class="block">a</div> </div>
  <div class="scroll" id="block-b"> <div class="block">b</div> </div>
</div>



<script>
  scrollHook("250", "block-a");
  scrollHook("250", "block-b");
</script>

Answer 1

Помещайте весь скрипт в окно HTML, или весь скрипт - в окно JavaScript.

В собраной странице сначала идет HTML, a потом JS.

.display {
  display: flex;
  margin-top: 250px;
}

.scroll {
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.block {
  width: 200px;
  height: 500px;
  background-color: #f6f6f6;
}

<div class="display">
  <div class="scroll" id="block-a">
    <div class="block">a</div>
  </div>
  <div class="scroll" id="block-b">
    <div class="block">b</div>
  </div>
</div>

<script>
  function scrollHook(offsetValue, element) {
    let thisElement = document.getElementById(element);
    window.onscroll = function() {
      if (window.pageYOffset > offsetValue) {
        thisElement.style.overflow = "scroll";
      } else if (window.pageYOffset < offsetValue) {
        thisElement.style.overflow = "hidden";
      }
    };
  };
</script>

<script>
  scrollHook("250", "block-a");
  scrollHook("250", "block-b");
</script>

Вопрос: После двух вызовов scrollHook, чему будет равно window.onscroll?

Ответ: window.addEventListener("scroll", function() { ... });

БЛОГ НА HUSL

Ошибка function is not defined, не знаю в чем проблема

Ответы (1 шт):