Javascript 如何向自定义滚动元素添加限制？_Javascript_Jquery_Html_Css

Javascript 如何向自定义滚动元素添加限制？

javascript jquery html css

Javascript 如何向自定义滚动元素添加限制？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在一个容器中显示了一个相当大的图像，图像随着视图端口的大小而拉伸，但由于图像太大，我在页面的一侧添加了滚动按钮，上下滚动，现在唯一的问题是，当我按下上下滚动按钮时，没有限制，用户可以一直运行，直到图像完全看不见为止，我如何才能阻止这种情况发生这是我到目前为止的代码 HTML: jQuery： //side scroller bar $('.scroll').live('click', function(){ var direction = $(this).hasClass('top

我在一个容器中显示了一个相当大的图像，图像随着视图端口的大小而拉伸，但由于图像太大，我在页面的一侧添加了滚动按钮，上下滚动，现在唯一的问题是，当我按下上下滚动按钮时，没有限制，用户可以一直运行，直到图像完全看不见为止，我如何才能阻止这种情况发生

这是我到目前为止的代码

HTML:

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 });

});

因此，正如您所看到的，每次单击，我都会将图像的顶部位置增加或减少其高度的10%，如何确保图像的顶部永远不会低于视口顶部，而图像的底部永远不会高于视口底部

有没有更好更有效的方法来达到同样的效果？

试试这个

<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>


帆布上浆
$（函数（）{
var canvasContext；
调整画布的大小（）；
$（窗口）.resize（函数（）{resizeCanvas（）}）；
函数resizeCanvas（）
{
var w=窗内宽度-40；
var h=窗内高度-40；
var canvasString='不支持画布'；
$（'#contentholder'）.empty（）；
$（canvasString）.appendTo（“#contentholder”）；
canvasContext=$（'#mainCanvas'）.get（0）.getContext（'2d'）；
drawOnCanvas（）；
}
函数drawOnCanvas（）
{
var x=15；
变量y=35；
canvasContext.font=“30pt serif”；
canvasContext.fillStyle=“#0f0”；
canvasContext.fillText（“你好，世界！”，x，y）；
}
});
#主画布
{
背景色：#000；
边框：实心3px#0F0；
}
身体
{
背景：#000；
}
#内容持有者
{
宽度：99%；
身高：99%；
保证金：自动；
}
我在JSFIDLE上玩这个…你能分享你照片的url吗？当然没问题。。。
//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 });

});

<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>