:root { scroll-behavior : auto } 스크롤 먹통

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

글쓴이

글

2024년 6월 6일 17:27 #125078

참가자

안녕하세요 제목에서도 언급했듯 css 파일에 :root { scroll-behavior : auto } 를 추가했을 때 스크롤 자체가 안되는 문제가 발생해서 질문 남깁니다.

[html]

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="main.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!-- jquery 설치하는 코드임. 이 밑에서 jQuery 사용가능함 -->
  </head>
  <body>

    <div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>

        <form action="success.html">
          <div class="my-3">
            <input type="text" class="form-control" id="idInput">
           </div>
           <div class="my-3">
             <input type="password" class="form-control" id="passwordInput">
           </div>
           <button type="submit" class="btn btn-primary">전송</button>
           <button type="button" class="btn btn-danger" id="close">닫기</button>
        </form>

      </div>
    </div>

    <script>

      $('form').on('submit', function(e){
        if (document.getElementById('idInput').value == '') {
          alert('아이디를 입력하세요');
          e.preventDefault();
        } else if (/\S+@\S+\.\S+/.test(document.getElementById('idInput').value) == false) {
          alert('올바르지 않은 이메일 형식입니다.');
          e.preventDefault();
        } else if (document.getElementById('passwordInput').value == '') {
          alert('비밀번호를 입력하세요');
          e.preventDefault();
        } else if (document.getElementById('passwordInput').value.length < 6) {
          alert('비밀번호가 너무 짧습니다.');
          e.preventDefault();
        } else if (/[A-Z]/.test(document.getElementById('passwordInput').value) == false){
          alert('비밀번호에 대문자를 포함하세요');
          e.preventDefault();
        }
      });
    </script>

    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <span class="badge bg-dark">Dark 🔄</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
    </nav>
    <ul class="list-group">
        <li class="list-group-item">An item
        <li class="list-group-item">A second item
        <li class="list-group-item">A third item
        <li class="list-group-item">A fourth item
        <li class="list-group-item">And a fifth one
    
    
    <script>
      window.addEventListener('scroll', function(){
        window.scrollTo(0, 100);
      });
    </script>

    <script>
      var count = 0;
      
      // document.getElementsByClassName('badge')[0].addEventListener('click', function(){
      //   count++;
      //   if (count % 2 == 1){
      //     document.getElementsByClassName('badge')[0].innerHTML = 'Light 🔄';
      //   } else {
      //     document.getElementsByClassName('badge')[0].innerHTML = 'Dark 🔄';
      //   }
      // })

      $('.badge').on('click', function(){
        count++;
        if (count % 2 == 1){
          $('.badge').html('Light 🔄');
        } else{
          $('.badge').html('Dark 🔄');
        }
      })

    </script>

    <div style="overflow: hidden;">
      <div class="main-bg">
        <h4>Shirts on Sale</h4>
        <button id="log-in" class="btn btn-danger">로그인</button>
      </div>

      <!-- <div class="slide-container">
        <div class="slide-box">
          < img src="car1.png">
        </div>
        <div class="slide-box">
          < img src="car2.png">
        </div>
        <div class="slide-box">
          < img src="car3.png">
        </div>
      </div> -->
      <div style="height: 1000px;"></div>
    </div>

    <!-- <div class="alert alert-danger">
      <span id="timesale">5</span>초 이내에 구매시 사은품 증정!
    </div> -->

    <button class="slide-pre">이전</button>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="slide-next">다음</button>

    <script>
      var temp = 1;

      // $('.slide-pre').on('click', function(){
      //   if (temp == 2) {
      //     $('.slide-container').css('transform', 'translateX(0vw)');
      //     temp = 1;
      //   } else if (temp == 3) {
      //     $('.slide-container').css('transform', 'translateX(-100vw)');
      //     temp = 2;
      //   }
      // });

      $('.slide-pre').on('click', function(){
        if (temp > 1) {
          $('.slide-container').css('transform', 'translateX(-' + (temp-2) + '00vw)');
          temp -=1;
        }
      });

      $('.slide-1').on('click', function(){
        if ((temp == 2) || (temp == 3)) {
          $('.slide-container').css('transform', 'translateX(0vw)');
          temp = 1;
        }
      });

      $('.slide-2').on('click', function(){
        if ((temp == 1) || (temp == 3)) {
          $('.slide-container').css('transform', 'translateX(-100vw)');
          temp = 2;
        }
      });

      $('.slide-3').on('click', function(){
        if ((temp == 1) || (temp == 2)) {
          $('.slide-container').css('transform', 'translateX(-200vw)');
          temp = 3;
        }
      });

      // $('.slide-next').on('click', function(){
      //   if (temp == 1) {
      //     $('.slide-container').css('transform', 'translateX(-100vw)');
      //     temp = 2;
      //   } else if (temp == 2) {
      //     $('.slide-container').css('transform', 'translateX(-200vw)');
      //     temp = 3;
      //   }
      // });

      $('.slide-next').on('click', function(){
        if (temp < 3) {
          $('.slide-container').css('transform', 'translateX(-' + temp + '00vw)');
          temp +=1;
        }
      });

    </script>

    <script>
      // setTimeout(function(){
      //   $('.alert').hide();
      // }, 1000);

      // timer를 써서 interval 로 1초마다 span 숫자 1씩 감소시키자
      // 0이면 hide 해버리자

      // setInterval(function(){
      //   var time = $('#timesale').val();
      //   // time -= 1;
      // }, 1000);
      
      var time = $('#timesale').html(); // 5
      setInterval(function(){
        console.log(time);
        time -= 1;
        $('#timesale').html(time);
        if (time == -1){
          $('.alert').hide();
        }
      }, 1000);

    </script>

    <script>
        // document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
        //     document.getElementsByClassName('list-group')[0].classList.toggle('show');
        // })
        document.querySelector('.navbar-toggler').addEventListener('click', function(){
            document.querySelector('.list-group').classList.toggle('show');
        })

        $('#log-in').on('click', function(){
          $('.black-bg').addClass('show-modal')
        })

        $('#close').on('click', function(){
          $('.black-bg').removeClass('show-modal')
        })          
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>


[CSS]
:root { scroll-behavior : auto }

.alert-box {
    background-color: skyblue;
    padding: 20px;
    color: white;
    border-radius: 5px;
    display: none;
}

.list-group {
    display: none;
}

.show {
    display: block;
}

.black-bg {
    width : 100%;
    height : 100%;
    position : fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
    padding: 30px;
    visibility: hidden;
    opacity: 0;
    transition: all 1s;
  }

.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
  }

.show-modal {
    visibility: visible;
    opacity: 1;
}

.main-bg {
    padding: 100px 20px;
    background: lightgray;
}

.slide-container {
    width: 300vw;
    transition: all 1s;
}

.slide-box {
    width: 100vw;
    float: left;
}

.slide-box img {
    width: 100%;
}

.navbar {
    position: fixed;
    width: 100%;
    z-index: 5;
}

.navbar-brand {
    font-size: 30px;
}

제 코드는 위와 같습니다. 혹시 몰라서 !important 도 추가해보고 했는데 결과는 같았습니다. 구글링과 chatgpt 질로도 한계가 있어서 여쭤봅니다..!

2024년 6월 6일 19:53 #125089

codingapple

키 마스터

scroll 이벤트리스너 제거해봅시다

글쓴이

글

2 글 보임 - 1 에서 2 까지 (총 2 중에서)

답변은 로그인 후 가능합니다.

로그인

:root { scroll-behavior : auto } 스크롤 먹통

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png