堆棧內存溢出
  簡體   English   中英

如何使用 iPad 的滾動條顯示文本區域

[英]How to display textarea with scroller for iPad

 原文  2022-06-05 22:43:59  1   1    javascript/ html/ jquery/ css/ scroller

問題描述

使用 asScroller 庫。 文字不顯示。 這是我的例子

<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>jQuery asScrollbar</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/asScrollbar.css">
  <style type="text/css">
    body {
      background-color: #f7f7f7;
    }

    .section {
      padding: 20px;
    }

    .inner {
      margin: 0 auto;
      max-width: 960px;
    }

    .example {
      position: relative;
      overflow: hidden;
      padding: 10px;
      border: 1px solid #e0e0e0;
      -webkit-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
      -moz-box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
      box-shadow: 1px 1px 2px 0px rgba(200, 200, 200, 0.3);
      background-color: #fefefe;
    }

    .content-200px-height {
      height: 200px;
    }

    .content-300px-height {
      height: 300px;
    }

    .content-500px-height {
      height: 500px;
    }

    .content-1000px-height {
      background-color: rgb(232, 244, 255);
      height: 1000px;
    }
  </style>
</head>
<body>
  <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->
  <!--[if lt IE 8]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
  <div class="section">
    <div class="inner">
      <section>
        <h3>Horizontal scrollbar</h3>
        <div class="example" style="height: 50px">
          <div class="example-scrollbar-horizontal" data-options='{"easing": "ease"}'>
          </div>
        </div>
        <div class="example" style="height: 50px">
          <div class="example-scrollbar-horizontal" data-options='{"easing": "ease-in"}'>
          </div>
        </div>
        <div class="example" style="height: 50px">
          <div class="example-scrollbar-horizontal" data-options='{"easing": "ease-out"}'>
          </div>
        </div>
        <div class="example" style="height: 50px">
          <div class="example-scrollbar-horizontal" data-options='{"easing": "ease-in-out"}'>
          </div>
        </div>
      </section>
      <section>
        <h3>Vertical scrollbar</h3>
        <div class="example" style="height: 300px">
          <div class="example-scrollbar-vertical">
<textarea style="overflow-y: scroll; border-radius: 25px;" rows="10" cols="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</textarea>
          </div>
        </div>
      </section>
      <section>
        <div>
          <button class="api-move-to" data-to="0">Move to 0</button>
          <button class="api-move-to" data-to="50">Move to 50</button>
          <button class="api-move-to" data-to="0%">Move to 0%</button>
          <button class="api-move-to" data-to="100%">Move to 100%</button>
          <button class="api-move-to" data-to="50%">Move to 50%</button>
        </div>
        <div>
          <button class="api-move-by" data-by="20">Move by 20</button>
          <button class="api-move-by" data-by="+20">Move by +20</button>
          <button class="api-move-by" data-by="-20">Move by -20</button>
          <button class="api-move-by" data-by="20%">Move by 20%</button>
          <button class="api-move-by" data-by="+20%">Move by +20%</button>
          <button class="api-move-by" data-by="-20%">Move by -20%</button>
        </div>
      </section>
    </div>
  </div>
  <script src="js/jquery.js"></script>
  <script src="js/jquery.mousewheel.js"></script>
  <script src="js/jquery-asScrollbar.js"></script>
  <script type="text/javascript">
    jQuery(function() {
      $('.example-scrollbar-horizontal').asScrollbar({
        direction: 'horizontal',
        minHandleLength: 200,
        handleLength: 100
      });
      var api = $('.example-scrollbar-horizontal').data('asScrollbar');
      $('.api-move-to').on('click', function() {
        var to = $(this).data('to');
        $('.example-scrollbar-horizontal, .example-scrollbar-vertical').asScrollbar('moveTo', to);
      });
      $('.api-move-by').on('click', function() {
        var to = $(this).data('by');
        $('.example-scrollbar-horizontal, .example-scrollbar-vertical').asScrollbar('moveBy', to);
      });
      $('.example-scrollbar-vertical').asScrollbar({
        direction: 'vertical',
        handleLength: 100,
        maxHandleLength: 100,
        mouseDrag: true,
        touchDrag: true,
        pointerDrag: true,
        clickMove: true,
        clickMoveStep: 0.2, // 0 - 1
        mousewheel: true,
        mousewheelSpeed: 50,
        keyboard: true,
        useCssTransforms3d: true,
        useCssTransforms: true,
        useCssTransitions: true,
        duration: '800',
        easing: 'ease' // linear, ease-in, ease-out, ease-in-out
      });
    });
  </script>
</body>
</html>

幫助我用滾動條顯示我的文本區域。

1 個解決方案

解決方案1
 0  2022-06-06 20:56:27

我訪問了您的網站：http: //ourgoodguide.com/sites/scrollersandothers/asScrollbar/index.html這是我所做的更改：

<section>
    <h3>Vertical scrollbar</h3>
    <div class="example" style="height: 300px">
      <div class="example-scrollbar-vertical asScrollbar asScrollbar-vertical" draggable="false">
        <textarea style="overflow-y: scroll; border-radius: 25px;" rows="10" cols="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </textarea>
      <div class="asScrollbar-handle" style="height: 100px;"></div></div>
    </div>
</section>

通過 -> ：

<section>
    <h3>Vertical scrollbar</h3>
    <div class="example" style="height: 300px">
        <textarea style="overflow-y: scroll; /* border-radius: 25px; */ border: none; width: 100%; height: 100%;" rows="10" cols="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </textarea>
    </div>
</section>

在此處輸入圖像描述

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在 Textarea 元素中顯示數組 無法讓滾動條顯示在 textarea 中 如何隨機顯示textarea項目 如何在TextArea中顯示滑塊值 iPad上iframe中的Textarea行為 如何重新設計頁面Scroller？ 如何將相同的文本從一個文本區域顯示到另一個文本區域，反之亦然？ 如果內容內容如何顯示錯誤 <textarea></textarea> 使用JavaScript是空的嗎？ 如何在html代碼的另一部分或另一個textarea中顯示textarea中的文本 如何將textarea的值保存到本地存儲，然后在同一textarea中顯示它
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM