scroll-behavior 기능 채택완료
모으카
2년 전
조회 2,792
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개
2년 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><!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></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
모으카
2년 전
디테일한 소스 알려주셨는데 잘 안되네요. 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
2년 전
다음과 같이 해볼 수 있을 것 같습니다.
css
</p>
<p>.no-smooth-scroll {
scroll-behavior: auto !important;
}
html
</p>
<p><div class="content no-smooth-scroll">
<!-- 이 영역은 스무스 스크롤 기능이 제외됨 -->
</div>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
모으카
2년 전
이 속성은 적용해봤는데 안되네요. 감사합니다.
�
웹메이킹
2년 전
부트스트랩 경우 scroll-behavior 속성을 미디어 쿼리를 사용하여 설정하고 있기 때문에 해당 기능을 덮어쓰기 위해서는 미디어 쿼리를 사용하여 덮어쓰는 것이 좋을 좋을듯 합니다.
!important 를 사용해서 우선순위를 강제로 설정하므로, 기본적으로 적용되는 부트스트랩의 스타일을 덮어쓰게 됩니다. 원하는 속성 값을 사용하시면 됩니다.
또한 브라우저의 개발자 도구를 사용하여 스타일이 제대로 적용되고 있는지 확인하고, 다른 스타일 규칙과의 충돌 여부를 확인해 보시는것도 도움이 될 수 있을 듯 합니다.
[code]
/* 기본 속성을 덮어쓰는 미디어 쿼리를 추가합니다. */
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
/* 특정 페이지 영역에서 원하는 속성을 설정합니다. */
.content {
scroll-behavior: auto !important; /* 다른 값으로 설정해도 됩니다. */
}
[/code]
!important 를 사용해서 우선순위를 강제로 설정하므로, 기본적으로 적용되는 부트스트랩의 스타일을 덮어쓰게 됩니다. 원하는 속성 값을 사용하시면 됩니다.
또한 브라우저의 개발자 도구를 사용하여 스타일이 제대로 적용되고 있는지 확인하고, 다른 스타일 규칙과의 충돌 여부를 확인해 보시는것도 도움이 될 수 있을 듯 합니다.
[code]
/* 기본 속성을 덮어쓰는 미디어 쿼리를 추가합니다. */
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
/* 특정 페이지 영역에서 원하는 속성을 설정합니다. */
.content {
scroll-behavior: auto !important; /* 다른 값으로 설정해도 됩니다. */
}
[/code]
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인