如何使用纯javascript函数而不使用jquery在div中左右滚动？

wyyhbhjk 于 2023-02-15 发布在 Java

关注(0)|答案(5)|浏览(130)

我尝试在一个div中单独使用javascript向左或向右滚动，没有jquery。我已经使用jquery实现了它，但我需要单独使用javascript。代码：-
我希望按钮可以帮助水平滚动的div左或右。如何做到这一点。我实现了使用jquery这样：-

$('#right-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "+=200px"
  }, "slow");
});

 $('#left-button').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=200px"
  }, "slow");
});

.outer {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin: 10px;
}

.paddle {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 30px;
  height: 20px;
}

.lefty {
  left: 0;
}

.righty {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" id="content">
	<button class="lefty paddle" id="left-button"></button>
  <div class="inner" style="background:red"></div>
  <div class="inner" style="background:green"></div>
  <div class="inner" style="background:blue"></div>
  <div class="inner" style="background:yellow"></div>
  <div class="inner" style="background:orange"></div>
	<button class="righty paddle" id="right-button"></button>
</div>

JavaScript

来源：https://stackoverflow.com/questions/50611362/how-to-scroll-left-or-right-inside-a-div-using-pure-javascript-function-and-no-j

5条答案

按热度按时间

dced5bon1#

您只需要按如下方式使用translateX：另外，我强烈建议您不要使用js来制作像这样简单的动画。

const container = document.querySelector(".container");
const lefty = document.querySelector(".lefty");
let translate = 0;

lefty.addEventListener("click", function() {
  	translate += 200;
  	container.style.transform = "translateX(" + translate + "px" + ")";
});

const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
  	translate -= 200;
  	container.style.transform = "translateX(" + translate + "px" + ")";
});

.outer {
  
  overflow-x: hidden;
	  overflow-y: hidden;

}

.container {
  display: flex;
  transition: transform .4s ease-in;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
	margin:10px;
}
.paddle {
	position: absolute;
	top: 50px;
	bottom: 0;
	width: 30px;
	height:20px;
}
.lefty {
	left: 0;
  z-index:1;
}
.righty{
	right: 0;
   z-index:1;
}

<button class="lefty paddle" id="left-button"></button>
<div class="outer" id="content">
  <div class="container">
    <div class="inner" style="background:red"></div>
    <div class="inner" style="background:green"></div>
    <div class="inner" style="background:blue"></div>
    <div class="inner" style="background:yellow"></div>
    <div class="inner" style="background:orange"></div>
  </div>
</div>
<button class="righty paddle" id="right-button"></button>

赞(0）回复(0）举报 2023-02-15

1dkrff032#

使用scrollTo滚动元素：

var content = document.getElementById('content'),
    scrollStep = 200;

document.getElementById('right-button').addEventListener('click', function(e) {
  e.preventDefault();
  let sl = content.scrollLeft,
      cw = content.scrollWidth;
	
  if ((sl + scrollStep) >= cw) {
    content.scrollTo(cw, 0);
  } else {
    content.scrollTo((sl + scrollStep), 0);
  }
});

document.getElementById('left-button').addEventListener('click', function(e) {
  e.preventDefault();
  let sl = content.scrollLeft;
	
  if ((sl - scrollStep) <= 0) {
    content.scrollTo(0, 0);
  } else {
    content.scrollTo((sl - scrollStep), 0);
  }
});

.outer {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin:10px;
}
.paddle {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 30px;
  height:20px;
}
.lefty {
  left: 0;
}
.righty{
  right: 0;
}

<div class="outer" id="content">
  <button class="lefty paddle" id="left-button"></button>
  <div class="inner" style="background:red"></div>
  <div class="inner" style="background:green"></div>
  <div class="inner" style="background:blue"></div>
  <div class="inner" style="background:yellow"></div>
  <div class="inner" style="background:orange"></div>
  <button class="righty paddle" id="right-button"></button>
</div>

原来MS Edge和IE不支持scrollTo()方法。

赞(0）回复(0）举报 2023-02-15

kupeojn63#

这是使用核心javascript进行自定义水平滚动的解决方案
在. html中

<div class="pull-left mt-sm">
    <i class="icon-arrow-left pointer" onclick="scrollLeft()"></i>
</div>   
       
<div #widgetsContent class="custom-slider-main">
    <div class="info-box">
        <img src="file.jpg" class="info-box">
    </div>
    <div class="info-box">
        <img src="file.jpg" class="info-box">
    </div>
    <div class="info-box">
        <img src="file.jpg" class="info-box">
    </div>
    <div class="info-box">
        <img src="file.jpg" class="info-box">
    </div>
    <div class="info-box">
        <img src="file.jpg" class="info-box">
    </div>
    <div class="info-box">
        <img src="file.jpg" class="info-box">
    </div>
</div>

<div class="pull-right mt-sm">
    <i class="icon-arrow-right pointer" onclick="scrollRight()"></i>
</div>

在. css中

.custom-slider-main{
    display: flex;
    overflow: hidden;    
    scroll-behavior: smooth;
}

.info-box{
    width: 50px;
    height:50px
}

在. js中

let widgetsContent = document.getElementById("widgetsContent")

点击左/右按钮使用以下功能

scrollLeft(){
    widgetsContent.nativeElement.scrollLeft -= 150;
}
   
scrollRight(){
    widgetsContent.nativeElement.scrollLeft += 150;
}

赞(0）回复(0）举报 2023-02-15

snvhrwxg4#

非常感谢，这正是我正在寻找的，但我复制并粘贴所有文本到可视化代码在3个不同的文件html，js，和css，但我不能让它工作.控制台显示一个错误未捕获TypeError：无法读取null的属性（读取"addEventListener"），但在此页面（代码片段）上它可以工作。我在chrome、brave和firefox中尝试过。

var content = document.getElementById('content'),
    scrollStep = 200;

document.getElementById('right-button').addEventListener('click', function(e) {
  e.preventDefault();
  let sl = content.scrollLeft,
      cw = content.scrollWidth;
    
  if ((sl + scrollStep) >= cw) {
    content.scrollTo(cw, 0);
  } else {
    content.scrollTo((sl + scrollStep), 0);
  }
});

document.getElementById('left-button').addEventListener('click', function(e) {
  e.preventDefault();
  let sl = content.scrollLeft;
    
  if ((sl - scrollStep) <= 0) {
    content.scrollTo(0, 0);
  } else {
    content.scrollTo((sl - scrollStep), 0);
  }
});

.outer {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin:10px;
}
.paddle {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 30px;
  height:20px;
}
.lefty {
  left: 0;
}
.righty{
  right: 0;
}

<div class="outer" id="content">
  <button class="lefty paddle" id="left-button"></button>
  <div class="inner" style="background:red"></div>
  <div class="inner" style="background:green"></div>
  <div class="inner" style="background:blue"></div>
  <div class="inner" style="background:yellow"></div>
  <div class="inner" style="background:orange"></div>
  <button class="righty paddle" id="right-button"></button>
</div>

赞(0）回复(0）举报 2023-02-15

bqucvtff5#

你可以只使用滚动，但动画将是单独的。

document.getElementById("right-button").addEventListener("click", function() 
{
  $('#content').animate({ scrollLeft: "+=200px" }, "slow");
});

document.getElementById("left-button").addEventListener("click", function(){
  $('#content').animate({ scrollLeft: "-=200px" }, "slow");
});

赞(0）回复(0）举报 2023-02-15

我来回答

如何使用纯javascript函数而不使用jquery在div中左右滚动？

5条答案

相关问题

热门标签

最新问答