Блог

Главная - Вопросы по программированию - не удается включить полосу прокрутки при переполнении стиля css: прокрутка на s или div контейнера

не удается включить полосу прокрутки при переполнении стиля css: прокрутка на s или div контейнера

#javascript #html #css #canvas #scrollbar

Вопрос:

Я пытаюсь создать длинный холст для рисования, но пользователи могут выйти из режима рисования и перейти в режим прокрутки вручную, как вы обычно прокручиваете веб-сайт на своем телефоне.

Я думал добавить полосу прокрутки сбоку от холста. Но было бы лучше, если бы мы могли прокручивать холст нормально, как мы читаем веб-сайт по телефону.

html,css код:

 <!DOCTYPE html> 
<html> 
<head> 
  <meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />

  <style>
    .container {
      margin: 10px;
    overflow: scroll;
      }
    #main {border: 1px solid #0000ff; overflow: scroll;}
  </style>
  
  <script src="draw.js"></script>
</head> 
<body>
  <div class="container">
  <button id="clear">clear button that will clear teh canvas</button><br>
  <canvas id="main" width="250" height="1000"></canvas>
</div>
</body>
</html>

код javascript для сенсорного рисования:

 window.onload = function() {

    document.ontouchmove = function(e){ e.preventDefault(); }
  
    var canvas  = document.querySelector('#main');
    // const width = canvas.width = window.innerWidth;
    // const height = canvas.height = window.innerHeight;
    var canvastop = canvas.offsetTop;
  
    var context = canvas.getContext("2d");
  
    var lastx;
    var lasty;
  
    context.strokeStyle = "#000000";
    context.lineCap = 'round';
    context.lineJoin = 'round';
    context.lineWidth = 5;
  
    function clear() {
      context.fillStyle = "#ffffff";
      context.rect(0, 0, 300, 300);
      context.fill();
    }
  
    function dot(x,y) {
      context.beginPath();
      context.fillStyle = "#000000";
      context.arc(x,y,1,0,Math.PI*2,true);
      context.fill();
      context.stroke();
      context.closePath();
    }
  
    function line(fromx,fromy, tox,toy) {
      context.beginPath();
      context.moveTo(fromx, fromy);
      context.lineTo(tox, toy);
      context.stroke();
      context.closePath();
    }
  
    canvas.ontouchstart = function(event){                   
      event.preventDefault();                 
      
      lastx = event.touches[0].clientX;
      lasty = event.touches[0].clientY - canvastop;
  
      dot(lastx,lasty);
    }
  
    canvas.ontouchmove = function(event){                   
      event.preventDefault();                 
  
      var newx = event.touches[0].clientX;
      var newy = event.touches[0].clientY - canvastop;
  
      line(lastx,lasty, newx,newy);
      
      lastx = newx;
      lasty = newy;
    }
  
  
    var clearButton = document.getElementById('clear')
    clearButton.onclick = clear
  
    clear()
  }

Ответ №1:

Я действительно не понимаю, что ты хотел бы сделать. Однако нет необходимости добавлять «прокрутку» ко всему.

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

 .container {
    margin: 10px;
}
#main {
    border: 1px solid #0000ff;
    width: 250px;
    height:600px;
    overflow-y: auto
}

И затем:

 <canvas id="main"></canvas>

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

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

1. Эй, извините, я пытался добавить «переполнение-y: авто: и это сработало. Но мне интересно, есть ли другой способ, которым я могу прокручивать даже то, что мы касаемся холста. Таким образом, мы распустим рисунок на холсте и будем иметь нормальную функцию прокрутки

Метки: