Breaking News: Grepper is joining You.com. Read the official announcement!

hgow to hide scroll bar and add buttons in javascript

Nycto Nid answered on September 21, 2020 Popularity 9/10 Helpfulness 1/10

answer hgow to hide scroll bar and add buttons in javascript

related hgow to hide scroll bar and add buttons in javascript

hgow to hide scroll bar and add buttons in javascript

Comment

<div class="container">
  <div class="row">
      <div class="col-12">
          <div class="scoll-pane mt-4" id="container">
              <ul class="photos">
                  <li>
                      <img src="https://robohash.org/test">
                  </li>
                  <li>
                      <img src="https://robohash.org/test">
                  </li>
                  <li>
                      <img src="https://robohash.org/test">
                  </li>
                  <li>
                      <img src="https://robohash.org/test">
                  </li>
              </ul>
          </div>
      </div>
  </div>
 </div>
<button id="slideBack" type="button">Prev</button>
<button id="slide" type="button">Next</button>
 
 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: add hide javascript scroll

Link to this answer
Share Copy Link

Contributed on Sep 21 2020

Nycto Nid

0 Answers Avg Quality 2/10

Closely Related Answers

hgow to hide scroll bar and add buttons in javascript

Comment

.scoll-pane {
    width: 100%;
    height: auto;
    overflow: auto;
    outline: none;
    overflow-y: hidden;
    padding-bottom: 15px;
    -ms-overflow-style: scroll;  // IE 10+
    scrollbar-width: none;  // Firefox
}

ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

img {
    width: 300px;
    height: 180px;
}

  .scoll-pane::-webkit-scrollbar { 
  display: none;  // Safari and Chrome
  }

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: add hide h

Link to this answer
Share Copy Link

Contributed on Sep 21 2020

Nycto Nid

0 Answers Avg Quality 2/10

hgow to hide scroll bar and add buttons in javascript

Comment

var button = document.getElementById('slide');
button.onclick = function () {
    var container = document.getElementById('container');
    sideScroll(container,'right',25,100,10);
};

var back = document.getElementById('slideBack');
back.onclick = function () {
    var container = document.getElementById('container');
    sideScroll(container,'left',25,100,10);
};

function sideScroll(element,direction,speed,distance,step){
    scrollAmount = 0;
    var slideTimer = setInterval(function(){
        if(direction == 'left'){
            element.scrollLeft -= step;
        } else {
            element.scrollLeft += step;
        }
        scrollAmount += step;
        if(scrollAmount >= distance){
            window.clearInterval(slideTimer);
        }
    }, speed);
}

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: add hide javascript javascr

Link to this answer
Share Copy Link

Contributed on Sep 21 2020

Nycto Nid

0 Answers Avg Quality 2/10

hgow to hide scroll bar and add buttons in javascript

Contents

More Related Answers

hgow to hide scroll bar and add buttons in javascript

Closely Related Answers

hgow to hide scroll bar and add buttons in javascript

hgow to hide scroll bar and add buttons in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.