How do i scrollRight and ScrollLeft in Jquery based on a button movement and without Java script?

Question

I need to move the scrollbar based on a button movement.if the button move from left to right and the button position exceeds the default scrollbar max-width, i need to move the scrollbar right?

if i am move the button from right to left, if the button position exceeds the default scrollbar max-width,i need to move the scrollbar from right to left side?

is it possible?

but my problem is,i am assigned the default property of the parent container as

.limit
{
  overflow-x:auto;
  overflow-y:hidden;
  whites-pace:no-wrap;
}

so the scrollbar automatically shows of "overflow-x:auto" property. how do i calculate the default scroll,scrollbar maxwidth and minwidth ?

With scrollto() and scrollby() also is it possible to move the scrollbar?

for button i set the property like this

   .button {
     position:relative;
     display: inline;
     width: 200px;
     height: 75px;
     background-color:lightgray;
     font-size:large;
     margin:0 10px 0;
     -webkit-transform: perspective(100px)rotateX(30deg);
     -moz-transform: perspective(100px)rotateX(30deg);
  }

for the parent container i set the property like this

  parent {
    position:relative;
    margin: 20px;
    width: 800px;
    height: 40px;

        }

the body is given below

<body>
<div id="parent" class="parent">
<div class="limit">
<button data-tab="tab-1" class="button  current " >Car 1</button>
<button data-tab="tab-2" class="button">Car 2</button>
<button data-tab="tab-3" class="button">Car 3</button>
<button data-tab="tab-4" class="button">Car 4</button>
<button data-tab="tab-5" class="button">Car 5</button>
<button data-tab="tab-6" class="button">Computer</button>
<button data-tab="tab-7" class="button">Message</button>
<button data-tab="tab-8" class="button">Nature</button>
<button data-tab="tab-9" class="button">Power</button>
</div>
<div id="tab-1" class="tab-content current">
<img src="Images/Ford-Mustang.jpg" class="pic" /> Car 1
</div>
<div id="tab-2" class="tab-content" >
<img src="Images/car%201.jpg" class="pic"/>Car 2
</div>
<div id="tab-3" class="tab-content">
<img src="Images/car%202.jpg" class="pic"/> Car 3
</div>
<div id="tab-4" class="tab-content">
<img src="Images/car%203.jpg" class="pic"/>Car 4
</div>
<div id="tab-5" class="tab-content">
<img src="Images/car%204.jpg" class="pic"/>Car 5
</div>
<div id="tab-6" class="tab-content">
<img src="Images/computer.jpg"  class="pic"/>Computer
</div>
<div id="tab-7" class="tab-content">
<img src="Images/Message.GIF" class="pic"/>Message
</div>
<div id="tab-8" class="tab-content">
<img src="Images/nature.jpg" class="pic"/>Nature
</div>
<div id="tab-9" class="tab-content">
<img src="Images/power.jpg" class="pic"/>Power
</div>
</div>
</body>

the remaining style's of other elements are

  .button:hover 
  { 
    cursor: default;
  }
  .button:active 
 {
   cursor:move;
   z-index:40;
 }
 .button.drag
 {
   z-index: 99; 
   background-color:orange;
 }
 .pic
 {
   height:400px;
   width:700px;
 }
   button.current{
   background-color:greenyellow;
 }
 .tab-content
 {
   margin-top:40px;
   display: none;
   background-color:lightgoldenrodyellow;
   height:450px;
   width:800px;
 }
 .tab-content.current
 {
   display: inherit;
   position:absolute;
 }

Possible duplicate of [Horizontal Tab based menu with scrolling tabs](http://stackoverflow.com/questions/35742071/horizontal-tab-based-menu-with-scrolling-tabs) — Abhishek Pandey, Nov 02 '16 at 07:16

How do i scrollRight and ScrollLeft in Jquery based on a button movement and without Java script?

0 Answers0