오버플로하도록 설정된 HTML TD를 만드는 방법은 무엇입니까? 자바 스크립트를 통해 버튼 클릭만으로 숨겨진 스크롤을 부드럽게 만들 수 있습니까?

Question

오버플로가 숨겨진 HTML TD가 있습니다. 너비는 850px이고 높이는 567px입니다. 내부 콘텐츠의 높이는 567px, 너비는 1700px 여야합니다. 사용자가 TD 내부의 다음 표를 스크롤 할 수있는 JavaScript 단추를 클릭 할 수있게하려고합니다. 어떻게해야합니까? 내가 시도했습니다 document.getElementById("tilesDisplay").scrollBy(10,0)하지만 그 작동하지 않았다.

<tr> 
     <td style="margin:0px; padding:0px; width:100%;" cellpadding="0px" cellspacing="0px"> 
      <table style="margin:0px; padding:0px; width:100%; table-layout:fixed; overflow:hidden; white-space: nowrap;" cellpadding="0px" cellspacing="0px"> 
       <tr> 
        <td style="background-color:#000000; vertical-align:middle; text-align:left;" onmouseover="arrow(this,1,'left');" onmouseout="arrow(this,2,'left');" onclick="ChangePortfolioImage('left');">&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/general/arrow-left.png" style="width:25px; cursor:pointer;" /></td> 
        <td id="tilesDisplay" style="background-color:#000000; width:850px; height:567px; overflow:hidden; border:solid 1px #758264;"> 
         <table> 
           <tr> 
           <td style="width:850px; height:567px;"> 
            <table style="width:850px; height:567px;"> 
             <tr> 
              <% 
              rowCount=0 
              for i=1 to (ubound(theseImagesSplit)-1) 
               if rowCount=3 or rowCount=6 then 
               rowCount=rowCount+1 
                response.Write("</tr><tr>") 
               else 
                if rowCount=9 then 
                 rowCount=1 
                 response.Write("</tr></table></td><td style=""width:850px; height:567px;""><table style=""width:850px; height:567px;""><tr>") 
                else 
                 rowCount=rowCount+1 
                end if 
               end if 

               RS.Open "Select * FROM Portfolio WHERE ID=" & theseImagesSplit(i),conn 
                tiID=RS("ID") 
                tiImageURL=RS("imageURL") 
                tiCaption=RS("caption") 
                tiFrontPic=RS("frontPic") 
                tiCollection=RS("collection") 
               RS.Close 

               if cInt(tiID)=cInt(firstImage) then 
                tiSummary="true" 
                tiBorder="#3c4534" 
               else 
                tiSummary="false" 
                tiBorder="#bdc49f" 
               end if 
              %> 
                 <td style="height:150px;"><center> 
                  <table id="thumbnail<%=i %>" class="thumbnail" style="height:132px; width:198px; cursor:pointer; border:solid 1px <%=tiBorder %>;" summary="<%=tiSummary %>" onmouseover="this.style.border='solid 1px #3c4534';" onmouseout="thumbnailOut(this);" onclick="ChangePortfolioImage('<%=tiID %>'); updateThumbnailBorders(<%=(ubound(theseImagesSplit)-1) %>,<%=i %>);"> 
                   <tr> 
                    <td style="border:solid 3px #000000;"><img src="<%=tiImageURL %>" style="height:130px;" /></td> 
                   </tr> 
                  </table> 
                 </center></td> 
              <% 
              next 
              %> 
             </tr> 
            </table> 
           </td> 
          </tr> 
         </table> 
        </td> 
        <td style="background-color:#000000; vertical-align:middle; text-align:right;" onmouseover="arrow(this,1,'right');" onmouseout="arrow(this,2,'right');" onclick="ChangePortfolioImage('right');"><img src="../images/general/arrow-right.png" style="width:25px; cursor:pointer;" />&nbsp;&nbsp;&nbsp;&nbsp;</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 

Answer 1

상대적으로 배치 된 컨테이너 div를 사용하고 버튼 클릭 이벤트에서 컨테이너 div의 위치를 ​​오프셋하는 것이 가장 쉬운 방법이라고 생각합니다.

<table> 
    <tr> <td> 
      <div id="table-container"> <table class="subtable"> .... </table></div> 
    </td> </tr> 
</table> 

cont = document.getElementById('table-container'); 
offset = 850; // Or whatever the width of the subtable 

<input onClick = "cont.style.left = cont.style.left - offset;">