CODEWITHSUNDEEP
css
Rishabh
Rishabh

Reputation: 900

horizontal slide-scroll (not scrollbar) if div content overflows

I want to create a div with CSS (preferably without any library) whose contents can be slided right/left on mouse-click if the content of the div is larger than the div width. Like below:

enter image description here

I tried with overflow-scroll but that gives a scroll-bar which is not what I want. Is it possible to create this with CSS and JavaScript (AngularJS, which I am using in my app) combination, without using any other library? I can use jQuery if it can done using that.

Update: Created a working demo after @Shnibble's answer.

$("#left").mousedown(function() {
  var y = $("#content").offset();
  $("#content").animate({
    left: 0
  }, function callback() {
      $("#left").fadeOut();
  });

});

$("#right").mousedown(function() {
  var y = $("#content").offset();
  $("#left").show();
  $("#content").animate({
    left: y.left - 200
  });
  $("#info").text(y.left - 100);
});

Upvotes: 0

Views: 1136

Answers (1)

Shnibble
Shnibble

Reputation: 110

I'm not sure I know exactly what you want, do you want the <> arrows to scroll the content or do you want to click+drag the content left and right? Both can be accomplished with JQuery.

The former can be done by having the parent container positioned as relative and the content within positioned as absolute. Then you can use JQuery to alter the left offset of the content +/- depending on which arrow is clicked.

For the latter, you would do the same setup but check the mouse coordinates on click and apply the difference to the content left attribute until the mouse button is released.

As for making all of this only happen if the content overflows, you will need to do some checking with JQuery again to measure the width of the content and compare it to the parent container and only allow one of the above functions to run if the content is wider.

Alternatively, you co use overflow-x: auto and then style the scrollbar to fit in with your theme better? See here: https://css-tricks.com/custom-scrollbars-in-webkit/.

Upvotes: 1

Related Questions