常連

お世話さまです。皆さまのお知恵を貸して頂きたく、お願い致します。
画面描画について教えて頂きたいと思っています。
画面描画につていは、初心者すぎてしまい、色々と調べましたがわかりませんでした。

☆環境☆
Windows10 64bit
Visual Studio2017
C# (.Net 4.7.2)

☆実現したいこと☆
Panelの内容をボタン押下、スクロールバー操作によって、スクロールさせたい。

☆質問事項☆
PanelでのAutoScrollの制御です。
フォーム上にPanelを一つとボタン２つを配置し、Panleには塗りつぶした四角形をPanelの右端から左端にかけて10個描画します。
初期表示状態ではスクロールバーも一番右端に表示するようにしておきます。
ボタン１を押すとPanelの内容とスクロールバーが右へスクロールし、ボタン２を押すとPanelの内容とスクロールバーが左へスクロールするようにしたいのですが、スクロールバーとスクロール時のPanelの再描画をどのように行ったら良いのかわかりません。
ボタンのクリックイベント内でスクロール処理を行うのでしょうか？

☆初期表示イメージ☆
![イメージ説明](d762b76a879f9d23e58cfc641aa72a40.jpeg)


☆ソースコード☆
```C#
using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        int horScrollValue = 0;
        int verScrollValue = 0;

        bool isFirstTime = true;

        public Form1()
        {
            InitializeComponent();
            
        }

        private void panel1_Paint(object sender, PaintEventArgs e)
        {
            panel1.AutoScroll = true;
            panel1.AutoScrollMinSize = new Size(25 * 10, 25 * 0);

            if(isFirstTime)
            {
                panel1.HorizontalScroll.Value = HorizontalScroll.Maximum;
                isFirstTime = false;
            }
            

            Graphics g = panel1.CreateGraphics();
            g.Clear(SystemColors.Control);

            for (int i = 0; i < 10; i++)
            {
                g.FillRectangle(Brushes.DeepSkyBlue,
                    panel1.ClientSize.Width - 20 + horScrollValue - (i * 25),
                    panel1.ClientSize.Height - 20 + verScrollValue,
                    20,
                    20);
            }
        }

        private void button1_Click(object sender, EventArgs e)
        {
　　　　　　　// 右へスクロールする処理を記述
        }

        private void button2_Click(object sender, EventArgs e)
        {
            // 左へスクロールする処理を記述
        }
    }
}

```

C# Panelでのスクロールバー制御

### 前提・実現したいこと

Wordpressで自作のテーマを使用しサイトを運営しています。

### 発生している問題・エラーメッセージ

MacのChromeでサイトを見ると、スクロールバーが二重になって表示されることがあります。
常に二重表示されているわけではなく、マウスのホイールを転がしていると時々二重になって表示され、下までスクロールされない(本来必要ないスクロールバーに邪魔される)現象が起きております。

![問題発生時の画面](682ebf19da0823d5320699cfb4627f77.gif)
※画面はローカル環境のものなので現在公開中のサイトとは少々デザインや色が異なりますが同じ問題が生じています。

### 該当のソースコード

原因が不明ですがおそらくcssの問題かと思われます。
https://studio-pi.jp/
↑わたしのサイトです。
再現方法もわかっておらず、マウスホイールを転がしていると時々発生します。

### 試したこと

『Chrome　スクロールバー　二重』などの検索ワードで調べたところ、スタイルシートにoverflow-x:hidden;と記載されているとIEで再現できるとの情報がいくつか見つかりました。
しかし、overflow-x:hidden;は使用していないのと、IEではなくChromeで問題が発生しております。

ブラウザのデベロッパーツールでcssを修正してみたり、削除したりなど試みましたが解決に至りませんでした。

### 補足情報（FW/ツールのバージョンなど）

トップページの記事一覧画面、記事詳細、固定ページなどどこのページでも再現します。
サイトをご覧の上ご教示いただけないでしょうか。

よろしくお願いいたします。

Chromeでスクロールバーが二重に表示されてしまう

モーダルウィンドウが表示されたとき、画面に収まらなかった場合、スクロールできるようにしたいです。
id="modal"にoverflow:auto;　または、 overflow:scroll;　をつけてみたのですが、ダメでした。
アドバイス頂けないでしょうか。
宜しくお願い致します。

```HTML
<div id="mask" class="hidden"></div>

<section id="modal" class="hidden">
  <div class="modal">
    <img src="/img/closebtn.svg" class="modal_close">
    <div class="modal_inner">
      <h1>プライバシーポリシー</h1>
      <hr class="privacy_policy">
      <div class="modal_text">
        <h2>ほにゃらら</h2>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="modal_text">
        <h2>ほにゃらら</h2>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="modal_close" id="closebtn_under">閉じる</div>
    </div>
  </div>
</section>
```

```CSS
 .modal {
  position: relative;
}

.modal img {
  width: 43px;
  height: 43px;
  position: absolute;
  top: -43px;
  right: -43px;
  z-index: 500;
}

.modal img:hover {
  cursor: pointer;
  opacity: 0.9;
}

#mask {
  background: #0000004D;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 300;
}                                   

#mask.hidden {
  display: none;
}

#modal {
  background: #fff;
  width: 930px;
  padding: 20px;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: 0.5s;
  z-index: 400;
  box-shadow: 0px 0px 3px #00000029;
}

#modal.hidden {
  transform: translateY(-200%);
}

.modal_inner {
  width: 817.5px;
  margin: 0 auto;
}

.modal_inner h1 {
  text-align: center;
  margin: 0 auto;
  padding-top: 65px;
  padding-bottom: 24.5px;
  font-size: 24px;
  line-height: 39px;
  font-family: 'Noto Sans JP';
  font-weight: bold;
  color: #707070;
}

.privacy_policy {
  text-align: center;
  border: solid 2px #3F51B5;
  width: 155px;
  margin-top:0 ;
  margin-bottom: 48.5px;
}

.modal_text {
  margin-bottom: 30px;
}

.modal_text h2 {
  font-size: 20px;
  line-height: 32px;
  padding-left: 27.5px;
  font-family: 'Noto Sans JP';
  font-weight: bold;
  color: #707070;
  border-left: 3px solid #3F51B5;
}

.modal_text p {
  font-size: 16px;
  line-height: 26px;
  padding-left: 27.5px;
  padding-bottom: 26px;
  font-family: 'Noto Sans JP';
  color: #707070;
}

#closebtn_under {
  margin: 0 auto;
  width: 180px;
  padding: 9px 0 8px 0;
  font-size: 16px;
  line-height: 26px;
  font-family: 'Noto Sans JP';
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: #3F51B5;
  color: #FFF;
  border-radius: 12px;
  box-shadow: 0px 3px 6px #00000029;
  margin-bottom: 20px;
}
```

```JQuery
$(function(){
    $('#modal_open').on('click',function(){
        $('#modal').removeClass('hidden');
        $('#mask').removeClass('hidden');
        $('body').css('overflow','hidden');
        
    });
    $('.modal_close').on('click',function(){
        $('#modal').addClass('hidden');
        $('#mask').addClass('hidden');
        $('body').css('overflow','auto');
    });
    $('#mask').on('click',function(){
        $('#modal').addClass('hidden');
        $('#mask').addClass('hidden');
        $('body').css('overflow','auto');
    });
});
```

モーダルウィンドウをスクロールできるようにしたいです。

### 実現したいこと
・テーブルの上の行と左の列を固定してスクロールさせる
・スクロール時の挙動に問題がないこと


### 発生している問題・エラーメッセージ
HTMLとCSSでスクロールできるテーブルを作成しているのですが、「住所」の一列だけスクロール中にヘッダーの右の枠線が消えてしまいます。（データセルの枠線は消えません。）

一番左の固定列の幅を超える幅を設定すると消えてしまうようなのですが、いろいろ試しても直すことができず、、、。

■スクロール中　ボーダーが消える前
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-04/a95c587e-69f5-4b78-9d38-9b648028a50d.jpeg)


■ボーダーが消えた後（担当者名の左のボーダー）
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-09-04/bd785264-2c97-4108-9ac9-6f50e8161150.jpeg)
### 該当のソースコード
```HTML
            <div class="data_tbl">
                <table>
                    <tr>
                        <th class="column1">企業団体名</th>
                        <th class="column2">代表アカウント<br>フラグ</th>
                        <th class="column3">郵便番号</th>
                        <th class="column4">住所</th>
                        <th class="column5">担当者名</th>
                        <th class="column6">部署</th>
                        <th class="column7">役職</th>
                        <th class="column8">メールアドレス</th>
                        <th class="column9">電話番号</th>
                        <th class="column10">連絡先</th>
                    </tr>
                    <tr>
                        <th class="column1">株式会社A</th>
                        <td class="column2">0</td>
                        <td class="column3">000-0000</td>
                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
                        <td class="column5">山田太郎</td>
                        <td class="column6">営業部</td>
                        <td class="column7">部長AAA</td>
                        <td class="column8">test_mail@test.com</td>
                        <td class="column9">000-0000-0000</td>
                        <td class="column10">123456789-123456789</td>
                    </tr>
                    <tr>
                        <th class="column1">株式会社A</th>
                        <td class="column2">0</td>
                        <td class="column3">000-0000</td>
                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
                        <td class="column5">山田太郎</td>
                        <td class="column6">営業部</td>
                        <td class="column7">部長AAA</td>
                        <td class="column8">test_mail@test.com</td>
                        <td class="column9">000-0000-0000</td>
                        <td class="column10">123456789-123456789</td>
                    </tr>
                    <tr>
                        <th class="column1">株式会社A</th>
                        <td class="column2">0</td>
                        <td class="column3">000-0000</td>
                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
                        <td class="column5">山田太郎</td>
                        <td class="column6">営業部</td>
                        <td class="column7">部長AAA</td>
                        <td class="column8">test_mail@test.com</td>
                        <td class="column9">000-0000-0000</td>
                        <td class="column10">123456789-123456789</td>
                    </tr>
                    <tr>
                        <th class="column1">株式会社A</th>
                        <td class="column2">0</td>
                        <td class="column3">000-0000</td>
                        <td class="column4">東京都千代田区1-1-1千代田ビルA-101</td>
                        <td class="column5">山田太郎</td>
                        <td class="column6">営業部</td>
                        <td class="column7">部長AAA</td>
                        <td class="column8">test_mail@test.com</td>
                        <td class="column9">000-0000-0000</td>
                        <td class="column10">123456789-123456789</td>
                    </tr>
                </table>
            </div>
```

```CSS
.data_tbl{
    overflow: auto;
    width: 100%;
    height: 500px;
}

.data_tbl table{
    margin: 0;
    border-spacing: 0;
    table-layout: fixed;
    border-collapse: separate;
    width: 1000px;
}

.data_tbl td{
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background: #FFF;
    padding: 5px;
}

.data_tbl th{
    white-space: nowrap;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background: #f2f2f2;
    position: sticky;
    top: 0;
    left: 0;
}

.data_tbl tr:first-child th{
    border-top: 1px solid #999;
}

.data_tbl th:first-child{
    border-left: 1px solid #999;
}

.data_tbl tr:first-child th:first-child{
    z-index: 1;
}

.column1 {
    width: 250px;
}

.column2 {
    width: 120px;
}

.column3 {
    width: 90px;
}

.column4 {
    width: 260px;
}

.column5 {
    width: 130px;
}

.column6 {
    width: 130px;
}

.column7 {
    width: 130px;
}

.column8 {
    width: 250px;
}

.column9 {
    width: 130px;
}

.column10 {
    width: 150px;
}
```
### 試したこと

「border-collapse: separate;」をtableのcssに追記しても挙動は変わりませんでした。




stickyで行と列を固定したテーブルのヘッダーのボーダーが一部消える

### モーダルウィンドウを閉じた時にトップへスクロールしてしまう(トップへ戻ってしまう) 

モーダルウィンドウを閉じた時にトップへスクロールしてしまいます。(トップへ戻ってしまう) 
閉じた時も、スクロールせずに開いた位置で閉じるようにしたいです。

### 該当のソースコード

```HTML
<a href="#" class="js-modal-open" data-target="modal01">
    <div>
       <img src="img/〇〇.jpg" alt="" />
    </div>
    <p>〇〇</p>
</a>
<div id="modal01" class="modal js-modal">
  <div class="modal-bg js-modal-close">
    <div class="modal-content">
       <a href="#" class="js-modal-close">×</a>
       <img src="img/〇〇.jpg" alt="">
    </div>
  </div>
</div>
```
```CSS
*{
  margin: 0;
  padding: 0;
}

.modal{
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
}

.modal-bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.modal-content{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
  height: 80%;
  width: 80%;
  border-radius: 10px;
  background: #fff;
  padding: 40px;
}

body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
}
```
```jQuery
// モーダルウィンドウを開く
$('.js-modal-open').on('click', function(){
  var target = $(this).data('target');
  var modal = document.getElementById(target);
  scrollPosition = $(window).scrollTop();
  $('body').addClass('fixed').css({'top': -scrollPosition});

  $(modal).fadeIn();
  return false;
});

// モーダルウィンドウを閉じる
$('.js-modal-close').on('click', function(){
  $('body').removeClass('fixed');
  window.scrollTo( 0,{'top': -scrollPosition} );

  $('.js-modal').fadeOut();
});
```

### 試したこと
①ポップアップにfixedというクラス名を付与し、スクロール位置取得、その場で固定
②閉じるをクリックした際に、fixedクラスを取り、再度スクロール位置取得、該当箇所までスクロール

この手順でうまくいくと思ったのですが、できませんでした。
window.scrollTo( 0,{'top': -scrollPosition} );で閉じた時もスクロールした分の位置までスクロールしてくれると思ったのですが、トップへ戻ってしまいました。

var target = $(this).data('target');
var modal = document.getElementById(target);
上記の記述があるのは、ページ内に複数のモーダルを設置しているからです。

もう4日ほど悩み、心が折れそうなので、どなたかご教授頂けますと幸いです。宜しくお願いします。

モーダルウィンドウ(ポップアップ)を閉じた時にトップまでスクロールしてしまう

今まで１度もこの現象が起きたことは無いので原因がわからず困っています。

これまで制作したサイトは
-webkit-overflow-scrolling: touch; を指定しなくても滑らかにスクロールできていました。

親要素に○○○というCSSを設定しているとカクカクする...といった「原因」が知りたいです。
※ちなみに-webkit-overflow-scrolling: touch; を指定すると不具合が起きるので利用できません。

ご存知の方いらっしゃいましたらよろしくお願いいたします。



以前質問して回答がつかなかった内容▼ ---------------------------------------------------

###前提・実現したいこと
あるサイトをiPhone(実機)で見たときにスクロールがカクつくので慣性スクロールの設定をしたいのですが、
-webkit-overflow-scrolling: touch; で不具合が起こるので別の方法があれば教えていただきたいです。

###発生している問題・エラーメッセージ

<div id="wrap">内の全ての要素が表示されない。
※position:fixed;で固定表示しているものだけは表示される。

###該当のソースコード

■CSS
body {
-webkit-overflow-scrolling: touch;
}

■HTML
<body>
<div id="wrap">
・・・
</div>
</body>

###試したこと
下記のページにたどり着き、どうやらiOSのバグらしいということはわかったのですが具体的な解決方法はわかりません。
[http://shakezoomer.com/?p=818](http://shakezoomer.com/?p=818)

iPhoneでスクロールがカクカクなるのは何が原因ですか？

### 前提・実現したいこと



```
Chromeを使用しています。
縦長のWebサイトのキャプチャを一気に撮影する拡張機能はありますが、
キャプチャをモーダルやポップアップも同じように一気に撮影することは可能でしょうか。
撮影したいサイトの中には、スクロールが必要なモーダルやポップアップもあります。

＜例えばこのページのモーダル＞
https://www.lifenet-seimei.co.jp/plan/

```

### 試したこと

デベロッパーツール>ctrl+shift+P>「capture node screenshot」も試してみましたが、
スクロールが必要なツールチップは、画面で見えている範囲しか撮影ができませんでした。


### 補足情報（FW/ツールのバージョンなど）

Chromeを使用しています。

モーダルやポップアップも丸ごとキャプチャを撮りたい

### 前提・実現したいこと
Bootstrapを使用しています。
ナビゲーションバーを固定してページをスクロールさせたいのです。
### 発生している問題・エラーメッセージ
ナビゲーションバーの固定はできたのですが、スクロールができず下の方の画面を表示させることができません。
ナビゲーションバーをクリックすれば、下の方の画面も表示させられます。

### 該当のソースコード

```HTML

 <!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <title>Hello, world!</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  </head>
  <body data-spy="scroll" data-target="#navbarResponsive">

    
 <div id="home">
    
    
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
        <a class="navbar-brand" href="index.html"><img src="img/logo1.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#course">Course</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#portfolio">Portfolio</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#team">Team</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
        </div>

    </nav>

    
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            
            <div class="carousel-item active" style="background-image:url(img/slide0.jpg);">
                <div class="carousel-caption text-center">
                    <h1>Welcome To NUno</h1>
                    <h3>Animated Bootstrap Theme</h3>
                    <a class="btn btn-outline-light btn-lg" href="#course">Get Started</a>
                </div>
            </div>
            
            <div class="carousel-item" style="background-image:url(img/slide1.jpg);"></div>
            
            <div class="carousel-item" style="background-image:url(img/slide2.jpg);"></div>
        </div>
        
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aeia-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aeia-hidden="true"></span>
        </a>
     </div>
     
 </div>
    


    
     <div id="course"　class="offset">

     <div class="col-12 narrow text-center">
        <h1>Nuno THeme Advanced</h1>
        <p class="lead">Learn Bootstrap by creating an advanced Bootstrap4 Responsive website template from scratch, widh no step slipped</p>
        <a class="btn btn-secondary btn-md" href="http://bit.ly/
        advanced-bootstrap-course" target="_blank">93%　OFF COUPON "NUN093"</a>
     </div>
        
    </div>
    
    

    
     <div id="portfolio">
     
    </div>
    


     
     <div id="team">
        
    </div>
    


     
     <div id="contact">
        
    </div>
    
    

    
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>
```
```CSS

body{
    overflow: hidden;
    color: #505962;
    font-family: 'Noto Sans JP', sans-serif;
}

/*--- navbar ---*/

.navbar {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(0, 0, 0, .6)!important;
}

.navbar-brand img {
    height: 3rem;
}

.navbar-nav li {
    padding-right: .7rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-top: .8rem;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #1ebba3;
}

/*---slider---*/

.carousel-item {
    height: 100vh;
}
```
### 試したこと

スペルミスを疑ったのですが、どうやらスペルは合ってるみたいです。