Question

我有一个jquery，通过循环选择DIV中的每个图像。它就像一个旋转木马或滑块。 div有10张图片，div设置为overflow: auto;

当我到达图像编号6时，选择了下一个图像（7）但未显示（我的意思是滚动条没有上升）。如何设置Div滚动条上升，window滚动条保持不变（无移动）。

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

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

Answer 1

感谢Praveen

我正在使用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>

Jquery Div滚动条向上显示项目和窗口滚动条保持不变（没有移动）

1 个答案: