javascript - Horizontal Scroll on hoveron click - Stack Overflow

admin管理员组

文章数量:1334685

First of all thanks in advance for any help.

Case: I have multiple divs in one line. These divs are in a box and I'm able to scroll horizontally in this box to see the other divs. I've made two buttons (L for left and R for right) to scroll horizontally when hovering or clicking these buttons.

Problem: I've already tried with some CSS and JavaScript but I can't seem to get this right.

Does anybody know how to achieve horizontal scroll when hovering / clicking on a button (or arrow)?

I've made a fiddle: /

Would be awesome to get this working with CSS only or simple JavaScript since I have to implement this into a Joomla system. I know there are some jQuery plug-ins out there but in Joomla I have to replace all $-tags with "jQuery" and it's quite annoying to do this in every file.

Best regards.

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}

.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.box-inner {
  width: 10rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}

.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

<div class="box-outer">
  <a class="arrow-left">L</a>
  <a class="arrow-right">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

First of all thanks in advance for any help.

Case: I have multiple divs in one line. These divs are in a box and I'm able to scroll horizontally in this box to see the other divs. I've made two buttons (L for left and R for right) to scroll horizontally when hovering or clicking these buttons.

Problem: I've already tried with some CSS and JavaScript but I can't seem to get this right.

Does anybody know how to achieve horizontal scroll when hovering / clicking on a button (or arrow)?

I've made a fiddle: https://jsfiddle/wsemLhtz/

Would be awesome to get this working with CSS only or simple JavaScript since I have to implement this into a Joomla system. I know there are some jQuery plug-ins out there but in Joomla I have to replace all $-tags with "jQuery" and it's quite annoying to do this in every file.

Best regards.

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}

.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.box-inner {
  width: 10rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}

.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

<div class="box-outer">
  <a class="arrow-left">L</a>
  <a class="arrow-right">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

• javascript
• jquery
• css

Share Improve this question Follow asked Dec 26, 2015 at 17:23 KheberKheber 32711 gold badge33 silver badges1414 bronze badges 1

• And what you are already tried?) – Narek-T Commented Dec 26, 2015 at 17:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You can use that)

var box = $(".box-inner"), x;
$(".arrow").click(function() {
  if ($(this).hasClass("arrow-right")) {
    x = ((box.width() / 2)) + box.scrollLeft();
    box.animate({
      scrollLeft: x,
    })
  } else {
    x = ((box.width() / 2)) - box.scrollLeft();
    box.animate({
      scrollLeft: -x,
    })
  }
})

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}
.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}
.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}
.box-inner {
  width: 10rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}
.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="box-outer">
  <a class="arrow-left arrow">L</a>
  <a class="arrow-right arrow">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

Fiddle

FIDDLE:

$('a').click(function() {    
  switch ($(this).text()) {
  case "L":
    $('.box-inner').scrollLeft(-300);
    break;

  case "R":
    $('.box-inner').scrollLeft(300);
    break;
  }
});

use jquery like following........

 $(".arrow-left").click(function () { 
   var leftPos = $('.box-inner').scrollLeft();
   $(".box-inner").animate({scrollLeft: leftPos - 50}, 1);
 });

 $(".arrow-right").click(function () { 
     var leftPos = $('.box-inner').scrollLeft();
     $(".box-inner").animate({scrollLeft: leftPos + 50}, 1);
  });

EDIT: Here is updated fiddle https://jsfiddle/wsemLhtz/5/

There you go ! Solution here using some simple Jquery :)

http://codepen.io/AxelCardinaels/pen/rxMrem

HTML :

<div class="box-outer">
  <a class="arrow-left">L</a>
  <a class="arrow-right">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

CSS :

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}

.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.box-inner {
  width: 10rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}

.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

JS :

$(".arrow-left").click(function(){
     // To get actual position
    var actualScroll = $(".box-inner").scrollLeft();
  // To set new position
  $(".box-inner").scrollLeft(actualScroll+50)
})

Hope this is what you were looking for !

本文标签： javascriptHorizontal Scroll on hoveron clickStack Overflow