Блог

Главная - Вопросы по программированию - Как я могу добавить ограничения к пользовательскому элементу прокрутки?

Как я могу добавить ограничения к пользовательскому элементу прокрутки?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня в контейнере отображается довольно огромное изображение, изображение растягивается вместе с портом просмотра при изменении его размера, но поскольку изображение такое большое, я добавил кнопки прокрутки сбоку страницы, вверх и вниз, единственная проблема, с которой я сталкиваюсь сейчас, заключается в том, что когда я нажимаю вверх илиесли ограничений нет, пользователь может продолжать, пока изображение полностью не исчезнет из поля зрения, как я могу остановить это?

Вот код, который у меня есть на данный момент,

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

});

итак, как вы можете видеть, я увеличиваю или уменьшаю верхнее расположение изображения на 10% от его высоты при каждом нажатии, как я могу убедиться, что верхняя часть изображения никогда не будет опускаться ниже верхней части окна просмотра, а нижняя часть изображения никогда не будет подниматься выше нижней части окна просмотра?область просмотра?

Есть ли лучший, более эффективный способ достижения того же результата?

Комментарии:

1. я играю на jsfiddle с этим … можете ли вы поделиться URL-адресом своей фотографии?

2. Конечно, никаких проблем … dummyimage.com/2500×2500/000/fff

Ответ №1:

Попробуйте это.

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