CODEWITHSUNDEEP
javascriptjquerycssscroll
user8899874
user8899874

Reputation:

Scroll bar on the bottom of the page

want to get the same result like this horizontal scroll bar on this page: https://www.claytonbozard.com/#5

I need to create a scrollbar that will look like the default bottom scroll bar and always will be placed at the bottom of the page and will scroll only a specific section. (not all the page, only a specific section) Can anyone assist me with that?

I wrote this code but the scroll bar doesn't place on the bottom of the page:

.wrapper {
  /* background: #EFEFEF; */
  /* box-shadow: 1px 1px 10px #999; */
  margin: auto;
  text-align: center;
  position: relative;
  /* margin-bottom: 20px !important; */
  width: 100%;
  /* padding-top: 5px; */
}

.scrolls {
  overflow-x: scroll;
  overflow-y: hidden;
  /* height: 300px; */
  white-space: nowrap;
}

.scrolls img {
  width: 20%;
  cursor: pointer;
  display: inline-block;
  display: inline;
  margin-right: -5px;
  vertical-align: top;
}
<div class="wrapper">
  <div class="scrolls">
    <img src="images/01.jpg" />
    <img src="images/04.jpg" />
    <img src="images/07.jpg" />
  </div>
</div>

Upvotes: 0

Views: 107

Answers (2)

Sergej
Sergej

Reputation: 2196

Absolutely right. For horizontal scrolling - you will need a jQuery library and the mousewheel plugin.

$(document).ready(function () {
    $('.horizontal-scroll').mousewheel(function(e, delta) {
        this.scrollLeft -= (delta * 40);
        e.preventDefault();
    });
});
.horizontal-scroll {
  
 max-width: 100%;
 overflow: scroll;
 width: 100%;
 display: block;
}
ul {
    white-space:nowrap;
}
li { display: inline-block; width: 300px; height: 300px; background: red; border: 2px solid black; margin: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
<div class="horizontal-scroll">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Upvotes: 1

Ryuk Lee
Ryuk Lee

Reputation: 744

Use this plugin and add this code

$("body").mousewheel(function(evt, chg) {
  this.scrollLeft -= (chg * 50); //need a value to speed up the change
  evt.preventDefault();
});

The answer here

Upvotes: 0

Related Questions