scroll-behavior 기능
본문
Bootstrap v5.2.0 css 을 사용중입니다.
부트스트랩 css 속성에 스크롤이 정의 되어 있습니다.
@media (prefers-reduced-motion: no-preference) {
:root {scroll-behavior: smooth;}
}
그런데
특정 페이지 영역의 한 곳은 이 기능을 사용하고 싶지않습니다.
그래서 아래처럼 처리하였는데 먹히질않네요.
.content { scroll-behavior: contain!important; }
.content { scroll-behavior: none!important; }
방법이 있을까요?
답변 3
<style>
@media (prefers-reduced-motion: no-preference) {
:root {scroll-behavior: auto !important;}
}
</style>
전체 영역인 것 같긴 한데 도움 되려나 모르겠습니다.
다음과 같이 해볼 수 있을 것 같습니다.
css
.no-smooth-scroll {
scroll-behavior: auto !important;
}
html
<div class="content no-smooth-scroll">
<!-- 이 영역은 스무스 스크롤 기능이 제외됨 -->
</div>
!-->!-->
다음 코드가 도움이 될지 모르겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
@media (prefers-reduced-motion: no-preference) {
:root {scroll-behavior: smooth;}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const norel = document.querySelectorAll('.norel');
const fn_norel = function (evt) {
evt.preventDefault();
const href = evt.target.href;
if (href !== undefined) {
let hash = null;
if (href.search('#') > -1) {
hash = href.substring(href.search('#'), href.length);
}
const el = document.querySelector(hash);
if (el != null) {
window.scrollTo({
left: el.offsetLeft,
top: el.offsetTop,
behavior: 'instant'
});
}
}
}
norel.forEach((el, i) => {
el.addEventListener('click', fn_norel, false);
});
}, false);
</script>
</head>
<body>
<h2 id="top">[top] <a href="">init</a></h2>
<h2><a href="#bottom">goto bottom</a></h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2><a href="#bottom" class="norel">goto bottom</a></h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2>.</h2>
<h2 id="bottom">[bottom] <a href="#top">goto top</a></h2>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.