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>
이 속성은 적용해봤는데 안되네요. 감사합니다.
부트스트랩 경우 scroll-behavior 속성을 미디어 쿼리를 사용하여 설정하고 있기 때문에 해당 기능을 덮어쓰기 위해서는 미디어 쿼리를 사용하여 덮어쓰는 것이 좋을 좋을듯 합니다.
!important 를 사용해서 우선순위를 강제로 설정하므로, 기본적으로 적용되는 부트스트랩의 스타일을 덮어쓰게 됩니다. 원하는 속성 값을 사용하시면 됩니다.
또한 브라우저의 개발자 도구를 사용하여 스타일이 제대로 적용되고 있는지 확인하고, 다른 스타일 규칙과의 충돌 여부를 확인해 보시는것도 도움이 될 수 있을 듯 합니다.
/* 기본 속성을 덮어쓰는 미디어 쿼리를 추가합니다. */
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
/* 특정 페이지 영역에서 원하는 속성을 설정합니다. */
.content {
scroll-behavior: auto !important; /* 다른 값으로 설정해도 됩니다. */
}
다음 코드가 도움이 될지 모르겠습니다.
<!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>
디테일한 소스 알려주셨는데 잘 안되네요. 감사합니다.