英文:
How to add smooth scroll effect to div by css or javascript?
问题
使用点击事件创建一个具有左右滚动的可滚动div。我想通过CSS过渡或其他方式使滚动效果平滑化，请帮助
<div class="cardsliderblock">
<div class="sliderBlock" id="Slidercontent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<span class="btns horizon-prev" id="left-button"><</span>
<span class="btns horizon-next" id="right-button">></span>
</div>
// JS
const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
rightBtn.addEventListener("click", function(event) {
const content = document.querySelector('#Slidercontent');
content.scrollLeft += 150;
event.preventDefault();
});
leftBtn.addEventListener("click", function(event) {
const content = document.querySelector('#Slidercontent');
content.scrollLeft -= 150;
event.preventDefault();
});
// CSS
.sliderBlock {
display: flex;
height: 200px;
border: solid 1px red;
width: 800px;
overflow: hidden;
overflow-x: auto;
transition: 2s all ease;
}
.sliderBlock > div {
width: calc(100% / 5.5);
margin-right: 2.2%;
border: solid 1px black;
min-width: 143px;
}
.btns {
display: inline-block;
width: 20px;
height: 20px;
background: red;
}
英文:
Creating a scrollable div with left and right scroll on click event. I wanted to make the scroll effect smooth with CSS transition or any other way, please help
<div class="cardsliderblock">
<div class="sliderBlock" id="Slidercontent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<span class="btns horizon-prev" id="left-button"><</span>
<span class="btns horizon-next" id="right-button" >></span>
</div>
//JS
const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
rightBtn.addEventListener("click", function(event) {
const conent = document.querySelector('#Slidercontent');
conent.scrollLeft += 150;
event.preventDefault();
});
leftBtn.addEventListener("click", function(event) {
const conent = document.querySelector('#Slidercontent');
conent.scrollLeft -= 150;
event.preventDefault();
});
// CSS
.sliderBlock {
display: flex;
height: 200px;
border: solid 1px red;
width: 800px;
overflow: hidden;
overflow-x: auto;
transition: 2s all ease;
}
.sliderBlock>div {
width: calc(100% / 5.5);
margin-right: 2.2%;
border: solid 1px black;
min-width: 143px;
}
.sliderBlock>div:nth-child(5n) {}
.btns {
display: inline-block;
width: 20px;
height: 20px;
background: red;
}
答案1
得分: 1
你可以使用以下代码来实现平滑滚动效果：
*{
scroll-behavior: smooth;
}
英文:
You can use
*{
scroll-behavior: smooth;
}
to make this smooth
答案2
得分: 0
要实现平滑滚动，您需要使用 Element.scrollTo() 方法，而不是 scrollLeft 属性。使用 scrollTo 方法时，您可以传递 behavior 选项，并将其设置为 smooth。
了解更多关于 Element.scrollTo()
演示:
const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
rightBtn.addEventListener("click", function(event) {
const content = document.querySelector('#Slidercontent');
// 更改 1
content.scrollTo({
top: 0,
left: content.scrollLeft + 150,
behavior: "smooth",
});
event.preventDefault();
});
leftBtn.addEventListener("click", function(event) {
const content = document.querySelector('#Slidercontent');
// 更改 2
content.scrollTo({
top: 0,
left: content.scrollLeft - 150,
behavior: "smooth",
});
event.preventDefault();
});
.sliderBlock {
display: flex;
height: 200px;
border: solid 1px red;
width: 800px;
overflow: hidden;
overflow-x: auto;
transition: 2s all ease;
}
.sliderBlock>div {
width: calc(100% / 5.5);
margin-right: 2.2%;
border: solid 1px black;
min-width: 143px;
}
.btns {
display: inline-block;
width: 20px;
height: 20px;
background: red;
}
<div class="cardsliderblock">
<div class="sliderBlock" id="Slidercontent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<span class="btns horizon-prev" id="left-button"><<</span>
<span class="btns horizon-next" id="right-button">>></span>
</div>
英文:
For Smooth Scroll you need to use Element.scrollTo() method instead of scrollLeft property. with scrollTo you can pass the behavior option, setting it to smooth.
Learn more about Element.scrollTo()
Demo:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
rightBtn.addEventListener("click", function(event) {
const conent = document.querySelector('#Slidercontent');
// Change 1
conent.scrollTo({
top: 0,
left: conent.scrollLeft + 150,
behavior: "smooth",
});
event.preventDefault();
});
leftBtn.addEventListener("click", function(event) {
const conent = document.querySelector('#Slidercontent');
// Change 2
conent.scrollTo({
top: 0,
left: conent.scrollLeft - 150,
behavior: "smooth",
});
event.preventDefault();
});
<!-- language: lang-css -->
.sliderBlock {
display: flex;
height: 200px;
border: solid 1px red;
width: 800px;
overflow: hidden;
overflow-x: auto;
transition: 2s all ease;
}
.sliderBlock>div {
width: calc(100% / 5.5);
margin-right: 2.2%;
border: solid 1px black;
min-width: 143px;
}
.sliderBlock>div:nth-child(5n) {}
.btns {
display: inline-block;
width: 20px;
height: 20px;
background: red;
}
<!-- language: lang-html -->
<div class="cardsliderblock">
<div class="sliderBlock" id="Slidercontent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<span class="btns horizon-prev" id="left-button"><</span>
<span class="btns horizon-next" id="right-button">></span>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论