CSS でスクロールバーを実装しないためのいくつかの方法と実践-フロントエンドQ&A-php.cn

CSS でスクロールバーを実装しないためのいくつかの方法と実践

PHPz

リリース： 2023-04-21 11:46:21

オリジナル

803 人が閲覧しました

フロントエンド開発では、スクロールバーは非常に一般的な要素であり、私たちが普段目にする Web ページでは、ほぼすべてのページにスクロールバーが表示されます。ただし、場合によっては、スクロールバーのないページが表示されることがありますが、これはバグではなく設計上の選択です。この記事では、CSS でスクロールバーをなくすためのいくつかの方法と実践方法を検討します。

スクロールバーを非表示にする

最も一般的な方法は、CSS を使用してスクロールバーを非表示にすることです。 CSS にはスクロールバーのスタイルを制御するためのプロパティが多数用意されており、CSS3 のいくつかの新しいプロパティを使用してこの効果を実現できます。 Webkit ブラウザを例に挙げると、次のようになります。

body::-webkit-scrollbar { display: none; }

ログイン後にコピー

これにより、スクロールバー全体を非表示にすることができますが、他のブラウザでは機能しない可能性があります。複数のブラウザでこのメソッドを使用する必要がある場合は、次のコードを追加できます。

html { overflow: -moz-scrollbars-none; }
html {-ms-overflow-style: none;}
html { overflow: -webkit-scrollbar; }
html::-webkit-scrollbar { display: none; }

ログイン後にコピー

オーバーレイスクロールバー

スクロールバーを維持する必要がある場合がありますが、次のコードを使用します。スタイルを使用してページと統合し、より自然な効果を実現します。これにはある程度のスキルが必要です。

まず、コンテナを定義し、それを固定サイズに制限する必要があります。

.container {
  width: 100%;
  height: 500px;
  overflow: auto;
}

ログイン後にコピー

次に、コンテナ内に 2 つの子要素を定義します。1 つはコンテンツの実際のコンテナです。もう 1 つはスクロールバーとして使用します。

<div class="container">
  <div class="content"></div>
  <div class="scrollbar"></div>
</div>

ログイン後にコピー

次に、スクロールバーを正しい位置に配置する必要があります。 CSS の配置によって実装されます。

.scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background-color: #d3d3d3;
  opacity: 0;
  transition: opacity 0.2s;
}

ログイン後にコピー

次に、マウスホイールイベントリスナーをコンテナに追加し、スクロールバーの位置を更新する必要があります。

$('.container').bind('scroll', function() {
  updateScrollbar();
})

function updateScrollbar() {
  var scrollRatio = $('.container').scrollTop() / ($('.content').height() - $('.container').height());
  var topPosition = scrollRatio * ($('.container').height() - $('.scrollbar').height());
  $('.scrollbar').css('top', topPosition);
}

ログイン後にコピー

スクロールバーを使用しない

スクロールバーを非表示にしたり統合したりするだけでなく、ページの変更や反転効果などの他の方法を使用することもできます。

ページ変更効果:

非表示のコンテンツを固定パネルに配置し、スクロールポイントに到達したときに CSS アニメーションを使用して表示領域にスライドさせます。

.panel {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

ログイン後にコピー

.hiddenContent {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
  overflow: auto;
  padding-right: 17px;
  box-sizing: content-box;
  transition: transform 0.5s ease-in-out;
}

ログイン後にコピー

.panel.active .hiddenContent {
  transform: translateY(-100%);
}

ログイン後にコピー

反転効果:

コンテナを追加し、パースペクティブプロパティを使用すると、コンテンツが 3 次元空間内で回転します。

.container {
  height: 100%;
  perspective: 1000px;
}

.content {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.content.inverted {
  transform: rotateX(180deg);
}

ログイン後にコピー

$('.container').on('scroll', function() {
  if ($('.container').scrollTop() >= $('.content').height() / 2) {
    $('.content').addClass('inverted');
  } else {
    $('.content').removeClass('inverted');
  }
})

ログイン後にコピー

概要:

この記事では、CSS でスクロールバーをなくす方法を検討し、これらの方法を適用するためのいくつかの実践を使用しました。どの方法を使用する場合でも、視覚的なシンプルさとユーザーエクスペリエンスの間にはトレードオフがあり、デザインに基づいて最適なものを選択してください。

以上がCSS でスクロールバーを実装しないためのいくつかの方法と実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。