jquery div滾動條上去顯示項目和窗口滾動條保持不變（沒有運動）

Question

我有一個jQuery的，通過循環選擇DIV中的每個圖像。它就像一個傳送帶或滑塊。所述div有10個圖像和當我到圖像編號6，下一個圖像的圖像（7）div設爲overflow: auto;

被選擇但是沒有示出（我的意思是滾動條是不會向上）。我如何設置Div滾動條上升和window滾動條保持不變（不移動）。

我檢查了網絡，這是我得到的最接近的答案，但它不在IE中工作，jQuery focus without scroll。

有人可以幫我或給我一個想法嗎？

Answer 1

感謝普利文

我使用jQuery這個

。基本上，代碼的流程是我有一個正確的圖像和左側的圖像（右側圖像滑動並顯示左側的圖像）。代碼是好的，但是當我使用IE測試時，會出現問題。窗口滾動也在移動，我只想在div上滾動。它在鉻和火狐工作正常

以下是我的代碼。

enter code here 



$(document).ready(function() { 
     //To store timeout id 
    var timeoutId,indx; 
    var slideImage = function (step) { 

     //Clear timeout if any 
     clearTimeout(timeoutId); 


      if (step == undefined) step = 1; 

      //Get current image's index 
      var indx = $('.item:visible').index('.item'); 

      //If step == 0, we don't need to do any fadein our fadeout 
      if (step != 0) { 
       //Fadeout this item //:eq() selector selects an element with a specific index number 
       $('.item:visible').stop(true, true).fadeOut("slow"); 
       $('.imageloop:eq(' + indx + ')').stop(true, true).css("background-color", "white"); 
      } 

      //Increment for next item 
      indx = indx + step; 

      //Check bounds for next item 
      if (indx >= $('.item').length) { 
       indx = 0; 
      } else if (indx < 0) { 
       // use for previous button 
       indx = $('.item').length - 1; 
      } 


      //If step == 0, we don't need to do any fadein our fadeout 
      if (step != 0) { 

       //Fadein next item 
       $('.item:eq(' + indx + ')').stop(true, true).fadeIn("slow"); 

       //focus on the image 
       $('.imageloop:eq(' + indx + ')').stop(true, true).css("background-color", "#6BB9E7"); 
       $('.imageloop:eq(' + indx + ')').stop(true, true).attr("tabindex", indx).focusWithoutScrolling(); 

       prevIndex = indx; 
      } 


} 


    $.fn.focusWithoutScrolling = function() { 
     var x = window.scrollX, y = window.scrollY; 
     this.focus(); 
     window.scrollTo(x, y); 

     }; 

    }; 


<div id='left_img' > 
    <div class='item'><img src="1.jpg" /></div> 
    <div class='item'><img src="2.jpg" /></div> 
    <div class='item'><img src="3.jpg" /></div> 
    <div class='item'><img src="4.jpg" /></div> 
    <div class='item'><img src="5.jpg" /></div> 
    <div class='item'><img src="6.jpg" /></div> 
    <div class='item'><img src="7.jpg" /></div> 
    <div class='item'><img src="8.jpg" /></div> 
    <div class='item'><img src="9.jpg" /></div> 
    <div class='item'><img src="10.jpg" /></div>       
</div> 

<div id = 'right_img'> 
    <div class='imageloop'tabindex='0'><img src="1.jpg" /></div> 
    <div class='imageloop'tabindex='1'><img src="2.jpg" /></div> 
    <div class='imageloop'tabindex='2'><img src="3.jpg" /></div> 
    <div class='imageloop'tabindex='3'><img src="4.jpg" /></div> 
    <div class='imageloop'tabindex='4'><img src="5.jpg" /></div> 
    <div class='imageloop'tabindex='5'><img src="6.jpg" /></div> 
    <div class='imageloop'tabindex='6'><img src="7.jpg" /></div> 
    <div class='imageloop'tabindex='7'><img src="8.jpg" /></div> 
    <div class='imageloop'tabindex='8'><img src="9.jpg" /></div> 
    <div class='imageloop'tabindex='9'><img src="10.jpg" /></div>      

</div>