1

mCustom jQuery スクロールバーを iframe 内で動作させることができません。しかし、私は柔軟性があり、iframe で信頼できる他のスクロールバー プラグインを誰かが知っている場合は、それを使用します (人気のあるプラグインはすべて既に試しました)。デフォルトのスクロールバーをよりモダンに見せる必要があるだけです。これに関するいくつかの記事を見つけましたが、さまざまな「ビット」のコードが含まれていますが、何も機能していないようです。私のフィドルhttp://jsfiddle.net/vz4k7zfy/では、 #TabularFrame 、つまり #InnerContainer ではなく iframe 自体にスクロールバーが必要であることに注意してください。これは、iframe の暗いヘッダーを固定したままにする必要があるためです。iframe に #InnerContainer を使用し、#TabularFrame を使用しない場合、フィドルの下に配置された「テスト コンテナー」が機能するのは興味深いことです。どんな助けでも大歓迎です。

$('#TabularFrame').mCustomScrollbar({
  theme: "dark-3",
  axis: "yx",
  scrollInertia: 500,
  autoDraggerLength: false,
});
#OuterContainer {
  height: 220px;
  width: 550px;
  padding: 10px;
  border: 1px solid red;
}

#InnerContainer {
  height: 170px;
  width: 520px;
  border: 1px solid blue;
  overflow-y: hidden;
  overflow-x: hidden;
  Padding: 30px 0px 0px 30px;
}

#TabularFrame {
  height: 140px;
  width: 460px;
  overflow: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.concat.min.js"></script>
<div id="OuterContainer">
  <div id="InnerContainer">
    <iframe id="TabularFrame" scrolling="no" src="https://c2amf323.caspio.com/dp.asp?AppKey=3eb84000d74521dad93a427d8e36">
    </iframe>
  </div>
</div>

4

0 に答える 0