admin管理员组

文章数量:1201415

I am trying to scroll left or right inside a div using javascript alone and no jquery for a purpose. I have achieved it using jquery but I need to do it using javascript alone. Code:-

I want the buttons to help scroll horizontally along the div left or right.How to do it. I achieved it using jquery this way:-

$('#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=".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>

I am trying to scroll left or right inside a div using javascript alone and no jquery for a purpose. I have achieved it using jquery but I need to do it using javascript alone. Code:-

I want the buttons to help scroll horizontally along the div left or right.How to do it. I achieved it using jquery this way:-

$('#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
Share Improve this question edited May 30, 2018 at 18:52 Scott Marcus 65.8k6 gold badges53 silver badges79 bronze badges asked May 30, 2018 at 18:32 J.DoeJ.Doe 1171 gold badge1 silver badge9 bronze badges 5
  • You're not just scrolling, you are animating. Do you want to keep it in vanilla javascript too ? – DontVoteMeDown Commented May 30, 2018 at 18:34
  • the jquery code works ....yea I want to keep the animation too maybe...if it doesnt cause much difficulty...basically I just want to scroll left or right using the buttons – J.Doe Commented May 30, 2018 at 18:40
  • Well maybe the jQuery code works. Hard to tell with the errors it throws. Mind putting up some working code? – gforce301 Commented May 30, 2018 at 18:42
  • how to just scroll without animation even that will do – J.Doe Commented May 30, 2018 at 18:49
  • FYI: event.preventDefault(); isn't needed in the JQuery or JavaScript solution because button elements don't have any native/default behavior to cancel. – Scott Marcus Commented May 30, 2018 at 19:22
Add a comment  | 

4 Answers 4

Reset to default 13

You just need to use translateX as following: Also, I extremely recommend you to not use js for animate simple things like this.

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>

Use scrollTo to scroll an element:

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>

It turns out that MS Edge and IE doesn't supports scrollTo() method.

This is the solution using core javascript for custom horizontal scroll

In .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>

In .css

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

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

In .js

let widgetsContent = document.getElementById("widgetsContent")

And On click of left/right button use the following functions

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

You can use this for just the scrolling but the animation would be separate.

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

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

本文标签： How to scroll left or right inside a div using pure javascript function and no jqueryStack Overflow

版权声明：本文标题：How to scroll left or right inside a div using pure javascript function and no jquery? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738585864a2101425.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。