How to allow horizontal scroll in for background image?

user_1891098 0
Viewed 1146

I am working on simple creative where i want to scroll background image of div horizontally when cursor drag left or right.

So basically i have div of width 300px which have background image greater than div width. now whenever you drag or swipe image should move accordingly

Here is code:

<style>
.sprite-container {
    width:300px;
    float:left;
    height:200px;
    background-image: url("sprite.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:scroll;
    overflow-x: visible;
    overflow: visible;
}
</style>
<div class="sprite-container"></div>

Here is jsfiddle link for same : http://jsfiddle.net/janakprajapati90/gzLqspar/

css html
2 Answers

I'm not sure using background-image here is what you want. What about that:

.img-container{
  width: 300px;
  /*height: 200px;*/ /* Probably not needed */
  overflow: scroll;
}
<div class="img-container">
  <img src="http://codeclippers.xyz/sprite.png">
</div>

Quoting w3schools.com:

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

It doesn't allow you to scroll the div if there's no content overflowing it.

user_133745130

You can use CSS calc() together with saving the position on clicking. Then calculate the difference on the mouse move.

const vertical_scroll = false;
const horizontal_scroll = true;

(function(){
  const scrolls = document.querySelectorAll(".sprite-container");
  for(let i = 0; i < scrolls.length; i++){
    initScrollable(scrolls.item(i), vertical_scroll, horizontal_scroll);
  }
})();

function initScrollable(t, vertical_scroll, horizontal_scroll){
  const init_bg_pos = [
    getComputedStyle(t, null)["background-position-x"],
    getComputedStyle(t, null)["background-position-y"]
  ];

  let dragging = false;
  let coords = [];
  let offset = [0, 0];

  t.addEventListener("mousedown", function(e){
    dragging = true;
    coords = [e.offsetX - offset[0], e.offsetY - offset[1]];
  });

  t.addEventListener("mouseup", function(){
    dragging = false;
  });

  t.addEventListener("mousemove", function(e){
    if(dragging){
      offset = [e.offsetX - coords[0], e.offsetY - coords[1]];

      t.style.backgroundPosition = 
        (horizontal_scroll ? (
            "calc(" + init_bg_pos[0] + " + " + offset[0] + "px)"
        ) : (
            init_bg_pos[0]
        )) + 
        " " + 
        (vertical_scroll ? (
          "calc(" + init_bg_pos[1] + " + " + offset[1] + "px)"
        ) : (
          init_bg_pos[1]
        ));
    }
  });
}
.sprite-container {
  width:300px;
  height:200px;
  display: inline-block;
  background-image: url("http://codeclippers.xyz/sprite.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment:scroll;
  overflow-x: visible;
  overflow: visible;
}
<div class="sprite-container"></div>

user_59343160
Related