jquery - Jquery Div滚动条上升以显示项目和窗口滚动条保持不变（无移动）

Question

DIV我有一个 jquery，可以通过循环选择每个图像。它就像一个旋转木马或滑块。有div10 张图像，并且div设置为overflow: auto;

当我到达第 6 个图像时，下一个图像 image(7) 被选中但未显示（我的意思是滚动条没有上升）。如何设置Div滚动条上升并且window滚动条保持不变（不移动）。

我检查了网络，这是我得到的最接近的答案，但它在 IE 中不起作用，jQuery focus without scroll。

有人可以帮助我或给我一个想法吗？

Answer 1

谢谢普拉文

我为此使用 Jquery。基本上代码的流程是我有一个右图和左图（右图滑动并在左边显示图像）。代码没问题，但是当我使用 IE 测试它时，问题就出现了。窗口滚动也在移动，我只想在 div 上滚动。它在 chrome 和 firefox 中运行良好

下面是我的代码。

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>