Styjun

In season 17 does LoN buff work against season journey set rewards?

Single word that parallels "Recent" when discussing the near future

Will the volt, ampere, ohm or other electrical units change on May 20th, 2019?

Is random forest for regression a 'true' regression?

Why is the Advance Variation considered strong vs the Caro-Kann but not vs the Scandinavian?

Is there any deeper thematic meaning to the white horse that Arya finds in The Bells (S08E05)?

the correct order of manual install WP and SSL on server

Why did Varys remove his rings?

What is the status of the Lannisters after Season 8 Episode 5, "The Bells"?

Wireless headphones interfere with Wi-Fi signal on laptop

Why is Drogon so much better in battle than Rhaegal and Viserion?

Could there be something like aerobatic smoke trails in the vacuum of space?

Were any toxic metals used in the International Space Station?

Were any of the books mentioned in this scene from the movie Hackers real?

Network latencies between opposite ends of the Earth

Does the wearer know what items are in which patch in the Robe of Useful items?

What is the effect of the Feeblemind spell on Ability Score Improvements?

What was Varys trying to do at the beginning of S08E05?

c++ conditional uni-directional iterator

Can I say: "When was your train leaving?" if the train leaves in the future?

When did game consoles begin including FPUs?

Does the Rogue's Reliable Talent feature work for thieves' tools, since the rogue is proficient in them?

labelled end points on logic diagram

What dog breeds survive the apocalypse for generations?

Control horizontal scroll with javascript

How do JavaScript closures work?How to horizontally center a <div>?What is the most efficient way to deep clone an object in JavaScript?Which “href” value should I use for JavaScript links, “#” or “javascript:void(0)”?How do I remove a property from a JavaScript object?Which equals operator (== vs ===) should be used in JavaScript comparisons?How do I include a JavaScript file in another JavaScript file?What does “use strict” do in JavaScript, and what is the reasoning behind it?How to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I'm working on a project and I'm stranded and i decided to ask you for help

I have 2 Divs

1- Div that stores content with full width

2- Div that simulates a scrollbar, which will make scrolling of the first Div

below my project image
https://prnt.sc/n1vyg5

100% functional example
https://www.udacity.com/course/blockchain-developer-nanodegree--nd1309
in the session "Learn with the best"

The structure is similar to this

.page 
 overflow: hidden;

.container 
 width: 60%;
 margin: auto;


h3 
 background: #dbd0bc;
 color: #000;
 padding: 1rem;


.hs 
 list-style: none;
 overflow-x: auto;
 overflow-y: hidden;
 white-space: nowrap;
 width: 100%;
 padding: 0 20% 2rem 20%;


.hs .item 
 display: inline-block;
 width: 17rem;
 background: #dbd0bc;
 text-align: center;
 margin-right: 0.75rem;
 height: 10rem;
 white-space: normal;


.scrollbar 
 width: 100%;
 background: #bcc9d4;
 height: 0.2rem;
 position: relative;
 margin: 3rem 0 3rem 0;
 border-radius: 2rem;
 height: 0.2rem;

.handle 
 position: absolute;
 width: 30%;
 height: 0.7rem;
 background: purple;
 cursor: pointer;
 cursor: -webkit-grab;
 top: 50%;
 transform: translateY(-50%);
 border-radius: 2rem;
 top: 1px !important;

<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

$('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 console.log(ui.position.left)
 
);

I do not know how to synchronize the drag of the '.handle' with the scrolling of the first div

javascript html css scroll scrollbar

share|improve this question

edited Mar 23 at 15:56

Isaac Gomes

1701313

asked Mar 23 at 15:21

Yung SilvaYung Silva

569

add a comment | 

1

I'm working on a project and I'm stranded and i decided to ask you for help

I have 2 Divs

1- Div that stores content with full width

2- Div that simulates a scrollbar, which will make scrolling of the first Div

below my project image
https://prnt.sc/n1vyg5

100% functional example
https://www.udacity.com/course/blockchain-developer-nanodegree--nd1309
in the session "Learn with the best"

The structure is similar to this

.page 
 overflow: hidden;

.container 
 width: 60%;
 margin: auto;


h3 
 background: #dbd0bc;
 color: #000;
 padding: 1rem;


.hs 
 list-style: none;
 overflow-x: auto;
 overflow-y: hidden;
 white-space: nowrap;
 width: 100%;
 padding: 0 20% 2rem 20%;


.hs .item 
 display: inline-block;
 width: 17rem;
 background: #dbd0bc;
 text-align: center;
 margin-right: 0.75rem;
 height: 10rem;
 white-space: normal;


.scrollbar 
 width: 100%;
 background: #bcc9d4;
 height: 0.2rem;
 position: relative;
 margin: 3rem 0 3rem 0;
 border-radius: 2rem;
 height: 0.2rem;

.handle 
 position: absolute;
 width: 30%;
 height: 0.7rem;
 background: purple;
 cursor: pointer;
 cursor: -webkit-grab;
 top: 50%;
 transform: translateY(-50%);
 border-radius: 2rem;
 top: 1px !important;

<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

$('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 console.log(ui.position.left)
 
);

I do not know how to synchronize the drag of the '.handle' with the scrolling of the first div

javascript html css scroll scrollbar

share|improve this question

edited Mar 23 at 15:56

Isaac Gomes

1701313

asked Mar 23 at 15:21

Yung SilvaYung Silva

569

add a comment | 

I'm working on a project and I'm stranded and i decided to ask you for help

I have 2 Divs

1- Div that stores content with full width

2- Div that simulates a scrollbar, which will make scrolling of the first Div

below my project image
https://prnt.sc/n1vyg5

100% functional example
https://www.udacity.com/course/blockchain-developer-nanodegree--nd1309
in the session "Learn with the best"

The structure is similar to this

.page 
 overflow: hidden;

.container 
 width: 60%;
 margin: auto;


h3 
 background: #dbd0bc;
 color: #000;
 padding: 1rem;


.hs 
 list-style: none;
 overflow-x: auto;
 overflow-y: hidden;
 white-space: nowrap;
 width: 100%;
 padding: 0 20% 2rem 20%;


.hs .item 
 display: inline-block;
 width: 17rem;
 background: #dbd0bc;
 text-align: center;
 margin-right: 0.75rem;
 height: 10rem;
 white-space: normal;


.scrollbar 
 width: 100%;
 background: #bcc9d4;
 height: 0.2rem;
 position: relative;
 margin: 3rem 0 3rem 0;
 border-radius: 2rem;
 height: 0.2rem;

.handle 
 position: absolute;
 width: 30%;
 height: 0.7rem;
 background: purple;
 cursor: pointer;
 cursor: -webkit-grab;
 top: 50%;
 transform: translateY(-50%);
 border-radius: 2rem;
 top: 1px !important;

<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

$('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 console.log(ui.position.left)
 
);

I do not know how to synchronize the drag of the '.handle' with the scrolling of the first div

javascript html css scroll scrollbar

share|improve this question

edited Mar 23 at 15:56

Isaac Gomes

1701313

asked Mar 23 at 15:21

Yung SilvaYung Silva

569

.page 
 overflow: hidden;

.container 
 width: 60%;
 margin: auto;


h3 
 background: #dbd0bc;
 color: #000;
 padding: 1rem;


.hs 
 list-style: none;
 overflow-x: auto;
 overflow-y: hidden;
 white-space: nowrap;
 width: 100%;
 padding: 0 20% 2rem 20%;


.hs .item 
 display: inline-block;
 width: 17rem;
 background: #dbd0bc;
 text-align: center;
 margin-right: 0.75rem;
 height: 10rem;
 white-space: normal;


.scrollbar 
 width: 100%;
 background: #bcc9d4;
 height: 0.2rem;
 position: relative;
 margin: 3rem 0 3rem 0;
 border-radius: 2rem;
 height: 0.2rem;

.handle 
 position: absolute;
 width: 30%;
 height: 0.7rem;
 background: purple;
 cursor: pointer;
 cursor: -webkit-grab;
 top: 50%;
 transform: translateY(-50%);
 border-radius: 2rem;
 top: 1px !important;

<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

$('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 console.log(ui.position.left)
 
);

share|improve this question

edited Mar 23 at 15:56

Isaac Gomes

1701313

asked Mar 23 at 15:21

Yung SilvaYung Silva

569

share|improve this question

edited Mar 23 at 15:56

Isaac Gomes

1701313

asked Mar 23 at 15:21

Yung SilvaYung Silva

569

edited Mar 23 at 15:56

Isaac Gomes

1701313

edited Mar 23 at 15:56

Isaac Gomes

1701313

asked Mar 23 at 15:21

Yung SilvaYung Silva

569

asked Mar 23 at 15:21

Yung SilvaYung Silva

569

1 Answer
1

active

oldest

votes

0

You have to do some calculation on the width of scrollbar and the width of scrolling content. Then decide how much is the percentage of the left position of scrollbar and pass it to the scroll percentage of content. I made all calcuations on window load to make sure that the size of elements are final:

$(window).on("load",function()
 var scrollbarWidth=$(".scrollbar").width();
 var handleWidth=$(".handle").width();
 var remaining=scrollbarWidth-handleWidth;
 var hsWidth=$("ul.hs")[0].scrollWidth- $("ul.hs")[0].clientWidth; 
 var percent;

 $('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 percent=(ui.position.left/remaining);
 $("ul.hs").scrollLeft(percent*hsWidth);
 
);

)

.page 
overflow: hidden;

.container 
width: 60%;
margin: auto;


h3 
background: #dbd0bc;
color: #000;
padding: 1rem;


.hs 
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;


.hs .item 
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;


.scrollbar 
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;

.handle 
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
 crossorigin="anonymous"></script>
<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

share|improve this answer

edited Mar 23 at 18:25

answered Mar 23 at 16:08

Ali SheikhpourAli Sheikhpour

5,97121946

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Perfect, it works, only remaining left the double way, when scrolling the content in a native way, fiddle with the div that simulates the scrollbar
  
  – Yung Silva
  Mar 23 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  in fact there is some error in your calculations, I just do not know what ... content is coming to an end before '.handle' reaches the end
  
  – Yung Silva
  Mar 23 at 16:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OK! I had to omit the clientWidth from total width of hs and did it! @YungSilva
  
  – Ali Sheikhpour
  Mar 23 at 16:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you, it worked out perfect.
  
  – Yung Silva
  Mar 23 at 17:36
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55315264%2fcontrol-horizontal-scroll-with-javascript%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You have to do some calculation on the width of scrollbar and the width of scrolling content. Then decide how much is the percentage of the left position of scrollbar and pass it to the scroll percentage of content. I made all calcuations on window load to make sure that the size of elements are final:

$(window).on("load",function()
 var scrollbarWidth=$(".scrollbar").width();
 var handleWidth=$(".handle").width();
 var remaining=scrollbarWidth-handleWidth;
 var hsWidth=$("ul.hs")[0].scrollWidth- $("ul.hs")[0].clientWidth; 
 var percent;

 $('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 percent=(ui.position.left/remaining);
 $("ul.hs").scrollLeft(percent*hsWidth);
 
);

)

.page 
overflow: hidden;

.container 
width: 60%;
margin: auto;


h3 
background: #dbd0bc;
color: #000;
padding: 1rem;


.hs 
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;


.hs .item 
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;


.scrollbar 
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;

.handle 
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
 crossorigin="anonymous"></script>
<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

share|improve this answer

edited Mar 23 at 18:25

answered Mar 23 at 16:08

Ali SheikhpourAli Sheikhpour

5,97121946

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Perfect, it works, only remaining left the double way, when scrolling the content in a native way, fiddle with the div that simulates the scrollbar
  
  – Yung Silva
  Mar 23 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  in fact there is some error in your calculations, I just do not know what ... content is coming to an end before '.handle' reaches the end
  
  – Yung Silva
  Mar 23 at 16:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OK! I had to omit the clientWidth from total width of hs and did it! @YungSilva
  
  – Ali Sheikhpour
  Mar 23 at 16:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you, it worked out perfect.
  
  – Yung Silva
  Mar 23 at 17:36
  

  
  
  
  

add a comment | 

0

You have to do some calculation on the width of scrollbar and the width of scrolling content. Then decide how much is the percentage of the left position of scrollbar and pass it to the scroll percentage of content. I made all calcuations on window load to make sure that the size of elements are final:

$(window).on("load",function()
 var scrollbarWidth=$(".scrollbar").width();
 var handleWidth=$(".handle").width();
 var remaining=scrollbarWidth-handleWidth;
 var hsWidth=$("ul.hs")[0].scrollWidth- $("ul.hs")[0].clientWidth; 
 var percent;

 $('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 percent=(ui.position.left/remaining);
 $("ul.hs").scrollLeft(percent*hsWidth);
 
);

)

.page 
overflow: hidden;

.container 
width: 60%;
margin: auto;


h3 
background: #dbd0bc;
color: #000;
padding: 1rem;


.hs 
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;


.hs .item 
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;


.scrollbar 
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;

.handle 
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
 crossorigin="anonymous"></script>
<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

share|improve this answer

edited Mar 23 at 18:25

answered Mar 23 at 16:08

Ali SheikhpourAli Sheikhpour

5,97121946

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Perfect, it works, only remaining left the double way, when scrolling the content in a native way, fiddle with the div that simulates the scrollbar
  
  – Yung Silva
  Mar 23 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  in fact there is some error in your calculations, I just do not know what ... content is coming to an end before '.handle' reaches the end
  
  – Yung Silva
  Mar 23 at 16:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  OK! I had to omit the clientWidth from total width of hs and did it! @YungSilva
  
  – Ali Sheikhpour
  Mar 23 at 16:53
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you, it worked out perfect.
  
  – Yung Silva
  Mar 23 at 17:36
  

  
  
  
  

add a comment | 

You have to do some calculation on the width of scrollbar and the width of scrolling content. Then decide how much is the percentage of the left position of scrollbar and pass it to the scroll percentage of content. I made all calcuations on window load to make sure that the size of elements are final:

$(window).on("load",function()
 var scrollbarWidth=$(".scrollbar").width();
 var handleWidth=$(".handle").width();
 var remaining=scrollbarWidth-handleWidth;
 var hsWidth=$("ul.hs")[0].scrollWidth- $("ul.hs")[0].clientWidth; 
 var percent;

 $('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 percent=(ui.position.left/remaining);
 $("ul.hs").scrollLeft(percent*hsWidth);
 
);

)

.page 
overflow: hidden;

.container 
width: 60%;
margin: auto;


h3 
background: #dbd0bc;
color: #000;
padding: 1rem;


.hs 
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;


.hs .item 
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;


.scrollbar 
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;

.handle 
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
 crossorigin="anonymous"></script>
<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

share|improve this answer

edited Mar 23 at 18:25

answered Mar 23 at 16:08

Ali SheikhpourAli Sheikhpour

5,97121946

$(window).on("load",function()
 var scrollbarWidth=$(".scrollbar").width();
 var handleWidth=$(".handle").width();
 var remaining=scrollbarWidth-handleWidth;
 var hsWidth=$("ul.hs")[0].scrollWidth- $("ul.hs")[0].clientWidth; 
 var percent;

 $('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 percent=(ui.position.left/remaining);
 $("ul.hs").scrollLeft(percent*hsWidth);
 
);

)

.page 
overflow: hidden;

.container 
width: 60%;
margin: auto;


h3 
background: #dbd0bc;
color: #000;
padding: 1rem;


.hs 
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;


.hs .item 
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;


.scrollbar 
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;

.handle 
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
 crossorigin="anonymous"></script>
<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

$(window).on("load",function()
 var scrollbarWidth=$(".scrollbar").width();
 var handleWidth=$(".handle").width();
 var remaining=scrollbarWidth-handleWidth;
 var hsWidth=$("ul.hs")[0].scrollWidth- $("ul.hs")[0].clientWidth; 
 var percent;

 $('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 percent=(ui.position.left/remaining);
 $("ul.hs").scrollLeft(percent*hsWidth);
 
);

)

.page 
overflow: hidden;

.container 
width: 60%;
margin: auto;


h3 
background: #dbd0bc;
color: #000;
padding: 1rem;


.hs 
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;


.hs .item 
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;


.scrollbar 
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;

.handle 
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
 crossorigin="anonymous"></script>
<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

$(window).on("load",function()
 var scrollbarWidth=$(".scrollbar").width();
 var handleWidth=$(".handle").width();
 var remaining=scrollbarWidth-handleWidth;
 var hsWidth=$("ul.hs")[0].scrollWidth- $("ul.hs")[0].clientWidth; 
 var percent;

 $('.handle').draggable(
 axis: 'x',
 containment: 'parent',
 drag: function (event, ui) 
 percent=(ui.position.left/remaining);
 $("ul.hs").scrollLeft(percent*hsWidth);
 
);

)

.page 
overflow: hidden;

.container 
width: 60%;
margin: auto;


h3 
background: #dbd0bc;
color: #000;
padding: 1rem;


.hs 
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;


.hs .item 
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;


.scrollbar 
width: 100%;
background: #bcc9d4;
height: 0.2rem;
position: relative;
margin: 3rem 0 3rem 0;
border-radius: 2rem;
height: 0.2rem;

.handle 
position: absolute;
width: 30%;
height: 0.7rem;
background: purple;
cursor: pointer;
cursor: -webkit-grab;
top: 50%;
transform: translateY(-50%);
border-radius: 2rem;
top: 1px !important;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
 integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
 crossorigin="anonymous"></script>
<div class="page">
 <div class="container">
 <h3>Container</h3>
 </div>

 <ul class="hs">
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 <li class="item">test</li>
 </ul>

 <div class="container">
 <div class="row">
 <div class="scrollbar">
 <div class="handle"></div>
 </div>
 </div>
 </div>
</div>

share|improve this answer

edited Mar 23 at 18:25

answered Mar 23 at 16:08

Ali SheikhpourAli Sheikhpour

5,97121946

answered Mar 23 at 16:08

Ali SheikhpourAli Sheikhpour

5,97121946

answered Mar 23 at 16:08

Ali SheikhpourAli Sheikhpour

5,97121946