Question

我需要根据按钮移动移动滚动条。如果按钮从左向右移动且按钮位置超出默认滚动条最大宽度，我需要向右移动滚动条吗？

如果我从右向左移动按钮，如果按钮位置超过默认滚动条最大宽度，我需要将滚动条从右侧移动到左侧？

有可能吗？

但我的问题是，我被分配了父容器的默认属性

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

因此滚动条会自动显示“overflow-x：auto”属性。如何计算默认滚动，滚动条最大宽度和最小宽度？

使用scrollto（）和scrollby（）也可以移动滚动条？

对于按钮我像这样设置属性

   .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);
  }

对于父容器我设置了像这样的属性

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

        }

身体在下面给出

<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>

其他元素的剩余样式是

  .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;
 }

如何根据按钮移动和没有Java脚本在Jquery中scrollRight和ScrollLeft？

0 个答案: