如何向自定義滾動元素添加限制？

我有一個相當大的圖像顯示在一個容器中，圖像在視圖端口調整大小時延伸，但由於圖像太大，我在頁面的一側添加了滾動按鈕，上下現在唯一的問題是，當我向上或向下按壓時沒有限制，用戶可以繼續前進直到圖像完全看不見，我怎麼能阻止這種情況發生？如何向自定義滾動元素添加限制？

這裏是我迄今爲止代碼，

HTML：

<body> 
    <div id="wrapper"> 

     <div class="scroll top"></div> 

     <div id="content"> 

      <div id="zoom_container"> 

       <img id="image" src="8052x2000px" /> 

      </div> 

     </div> 

     <div class="scroll bot"></div> 

    </div> 

</body>

CSS：

body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#wrapper { 
    overflow: hidden; 
    height: 100%; 
    max-height: 100%; 
} 

#content { 
    min-height: 100% !important; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

#image { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

的jQuery：

//side scroller bar 
$('.scroll').live('click', function(){ 

    var direction = $(this).hasClass('top'); 
    var img_pos_top = $("#zoom_container img").position().top; 
    var inc = 0; 

    inc = $("#zoom_container img").height()/10; 

    if(direction) 
    { 

     inc = $("#zoom_container img").position().top + inc; 

    } 
     else 
    { 
     inc = $("#zoom_container img").position().top - inc; 
    } 

    $("#zoom_container img").css({ position: 'relative',top: inc }); 

});

所以你可以看到我我正在增加或減少t如果將圖像定位在每次單擊高度10％時，我怎樣才能確保圖像的頂部永遠不會比視口的頂部向下更遠，並且圖像的底部永遠不會比視口的底部更靠上方？

是否有更好的更有效的方法來實現相同的結果？

來源

2011-09-29 Odyss3us

IM玩的jsfiddle這個......你可以分享你的照片的網址是什麼？ – albert

當然沒問題... http://dummyimage.com/2500x2500/000/fff – Odyss3us

試試這個。

<html> 
<head> 
    <title>Canvas Sizing</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 

      var canvasContext; 
      resizeCanvas(); 
      $(window).resize(function() { resizeCanvas() }); 

      function resizeCanvas() 
      { 
       var w = window.innerWidth - 40; 
       var h = window.innerHeight - 40; 
       var canvasString = '<canvas id="mainCanvas" width="' + w + '" height="' + h + '">Canvas is not supported</canvas>';    

       $('#contentholder').empty(); 
       $(canvasString).appendTo('#contentholder'); 
       canvasContext = $('#mainCanvas').get(0).getContext('2d');    

       drawOnCanvas(); 
      } 

      function drawOnCanvas() 
      { 
       var x = 15; 
       var y = 35; 

       canvasContext.font = "30pt serif"; 
       canvasContext.fillStyle="#0f0"; 
       canvasContext.fillText("Hello World!", x, y); 
      } 
     }); 
     </script> 
<style> 
    #mainCanvas 
    { 
    background-color: #000; 
    border: solid 3px #0F0; 
    } 
    body 
    { 
    background: #000; 
    } 
    #contentholder 
    { 
    width: 99%; 
    height: 99%; 
    margin: auto; 
    } 
</style 
</head> 

<body> 
    <div id="contentholder"></div> 
</body>

來源

2011-09-29 04:54:27

如何向自定義滾動元素添加限制？

回答

相關問題