常連

### 前提・実現したいこと

WPF、C#でDataTableを使用したDataGridを表示しています。
セルの値によって背景色を設定したく、DataGridに表示された値のセルを
すべて評価してスタイルを指定しています。
画面上に収まる行数のデータであれば問題なく想定通りに表示されますが、
行数が増えてスクロールが表示されるとスクロールする度に
行単位で背景色があちこち動いてしまいます。
スクロールがある場合でもセルの背景色をずれないように設定する方法はないでしょうか。

※ビヘイビアは以下サイトを参考にさせていただいています。
[https://www.paveway.info/entry/2019/05/08/wpf_getcellcontent](https://www.paveway.info/entry/2019/05/08/wpf_getcellcontent)

### 該当のソースコード
```XAML
<DataGrid Grid.Row="2" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top" 
                  x:Name="dataGrid" CanUserAddRows="False" CanUserDeleteRows="True"
                  ItemsSource="{Binding DataTable.DefaultView}" SelectedIndex="{Binding SelectedIndex}"
                  AutoGenerateColumns="True" AutoGeneratingColumn="dataGrid_AutoGeneratingColumn"
                  SourceUpdated="dataGrid_SourceUpdated" CurrentCellChanged="dataGrid_CurrentCellChanged"
                  FontSize="28" IsReadOnly="{Binding IsReadOnly}" FrozenColumnCount="4"
                  PreviewKeyDown="dataGrid_PreviewKeyDown">
    
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
            <Style.Triggers>
                <Trigger Property="Name" Value="Cell0">
                    <Setter Property="Background" Value="Transparent"/>
                </Trigger>
                <Trigger Property="Name" Value="Cell1">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
                <Trigger Property="Name" Value="Cell2">
                    <Setter Property="Background" Value="Yellow"/>
                </Trigger>
                <Trigger Property="Name" Value="Cell3">
                    <Setter Property="Background" Value="Blue"/>
                </Trigger>
                <Trigger Property="Name" Value="Cell4">
                    <Setter Property="Background" Value="Aqua"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.CellStyle>
</DataGrid>
```

```C#
int i = 0;
int j = 0;
foreach (DataRowView item in dataGrid.Items)
{
	foreach (var col in item.Row.ItemArray)
	{
		var row = dataGrid.ItemContainerGenerator.ContainerFromIndex(i) as DataGridRow;
		// 行オブジェクトが取得できない場合
		if (row == null)
		{
			// 対象の行が表示されていない場合、行オブジェクトが取得できないため
			// 対象の行が表示されるようスクロールします。
			dataGrid.UpdateLayout();
			dataGrid.ScrollIntoView(dataGrid.Items[i]);
			// 再度、行オブジェクトを取得します。
			row = dataGrid.ItemContainerGenerator.ContainerFromIndex(i) as DataGridRow;
		}

		string tmp = col.ToString();
		if (tmp.IndexOf(",") > 0)
		{
			// データグリッドのセルオブジェクトを取得します。
			var cell = dataGrid.Columns[j].GetCellContent(row);
			// データグリッドのセルオブジェクトが取得できない場合
			if (cell == null)
			{
				// 対象のセルが表示されていない場合、セルオブジェクトが取得できないため
				// 対象のセルが表示されるようスクロールします。
				dataGrid.UpdateLayout();
				dataGrid.ScrollIntoView(dataGrid.Columns[j]);
				// 再度、セルオブジェクトを取得します。
				cell = dataGrid.Columns[j].GetCellContent(row);
			}
			TextBlock textBlock = cell as TextBlock;
			string text = textBlock.Text;

			if (!string.IsNullOrWhiteSpace(text))
			{// 値が入っている
				// テキストの値ででセルの色を変える
				switch (text)
				{
					case "1":
						(cell.Parent as DataGridCell).Name = "Cell1";
						break;
					case "2":
						(cell.Parent as DataGridCell).Name = "Cell2";
						break;
					case "3":
						(cell.Parent as DataGridCell).Name = "Cell3";
						break;
					case "4":
						(cell.Parent as DataGridCell).Name = "Cell4";
						break;
					default:
						(cell.Parent as DataGridCell).Name = "Cell0";
						break;
				}
			}
		}
		j++;
	}
	i++;
	j = 0;
}

// スクロールを一番上に戻す
dataGrid.UpdateLayout();
dataGrid.ScrollIntoView(dataGrid.Items[0]);
```

### 試したこと
DataGrid自体のスクロールを禁止にして、ScrollViewerを親に設定してみましたが
この方法だと想定通りに背景色は適用されました。
しかし、ヘッダーが固定にならない、横スクロールがある場合最下部までスクロールしないと
横スクロールできないという問題が発生し断念しました。

以上、どうぞよろしくお願いいたします。

【WPF】【C#】DataGridCellでセルの背景色を変えた際にスクロールがあるとスクロールの度にずれる

お世話さまです。皆さまのお知恵を貸して頂きたく、お願い致します。
画面描画について教えて頂きたいと思っています。
画面描画につていは、初心者すぎてしまい、色々と調べましたがわかりませんでした。

☆環境☆
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');
    });
});
```

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

### 前提・実現したいこと
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;
}
```
### 試したこと

スペルミスを疑ったのですが、どうやらスペルは合ってるみたいです。

ページをスクロールできない

今まで１度もこの現象が起きたことは無いので原因がわからず困っています。

これまで制作したサイトは
-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を使用しています。

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

### 前提・実現したいこと

ハンバーガーメニュー内で縦スクロールできるようにしたいです。

### 発生している問題

```
縦スクロールできず、機種によっては下方の文字が切れてしまいます。
```

### 該当のソースコード

```HTML
	<div class="hdr_inner">
		<div class="hamburger" id="click">
		  <span></span>
		  <span></span>
		  <span></span>
		</div>
	    <nav class="globalMenuSp" id="nav">
	    	<a href="index.html" class="logo"><img src="assets/images/logo_key.png" alt="pluster"></a>
	     	<ul class="open">
	     	　　 <li><a href="index.html">01</a></li>
	            <li><a href="#">02</a></li>
	            <li><a href="#">03</a></li>
	            <li><a href="#">04</a></li>
	            <li></li>
	        </ul>
	     	<p><span>ACCESS</span>zyuusyohairu</p>
	     </nav>
	</div>
```
```CSS
html{
  overflow-x: hidden;
}
body{
  height: auto;
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
  background-size: 100%;
  display: block;
  color: #000000;
}
.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    top: 2.7%;
    right: 3%;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  }
  .hamburger span {
    display : block;
    position: absolute;
    width   : 24px;
    height  : 2px ;
    left    : 6px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
  }
  .hamburger span:nth-child(1) {
    top: 6px;
  }
  .hamburger span:nth-child(2) {
    top: 12px;
  }
  .hamburger span:nth-child(3) {
    top: 18px;
  }

  /* ナビ開いてる時のボタン */
  nav.globalMenuSp.active {
    background: #464144;
    height: 100%;
  }
  .hamburger.active span {
    background : #fff;
  }
  .hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }

  .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(3) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }
  nav.globalMenuSp {
    position: fixed;
    padding-bottom: 100px;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #000;
    background: #fff;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }
  nav.globalMenuSp a.logo{
    padding:30px 0;
    display: inline-block;
    margin: 0 auto 60px;
  }
  nav.globalMenuSp ul {
    margin: 0 auto 50px;
    width: 100%;
  }
  nav.globalMenuSp ul li {
    list-style-type: none;
    width: 100%;
    color: #fff;
    text-align: left;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  nav.globalMenuSp ul li:hover{
    background: rgba(255, 255, 255, 0.6);
  }
  nav.globalMenuSp ul li a {
    display: block;
    color: #fff;
    padding: 30px 10%;
    text-decoration :none;
    font-size: 2.4rem;
    letter-spacing: 2px;
    span{
      vertical-align: top;
      font-size: 1.2rem;
      margin-right: 10px;
      color: #fff;
      }
  }
  nav.globalMenuSp p{
    font-size: 1.2rem;
    line-height: 2;
    padding: 0 10%;
    text-align: left;
    color: #fff;
    span{
      color: #fff;
      display: block;
      margin-bottom: 10px;
      font-weight: bold;
      line-height: 1;
    }
  }
  nav.globalMenuSp.active {
    transform: translateY(0%);
  }
```
```JS
function disableScroll(event) {
event.preventDefault();
}

$(function() {
$('.hamburger').click(function() {
$(this).toggleClass('active');

if ($(this).hasClass('active')) {
$('.globalMenuSp').addClass('active');
document.addEventListener('mousewheel', disableScroll, { passive: false });
document.addEventListener('touchmove', disableScroll, { passive: false });
document.body.style.overflow = "hidden";
} else {
$('.globalMenuSp').removeClass('active');
document.removeEventListener('mousewheel', disableScroll, { passive: false });
document.removeEventListener('touchmove', disableScroll, { passive: false });
document.body.style.overflow = "visible";
}
});
});

$('.open a[href]').on('click', function(event) {
    $('.hamburger').trigger('click');
});
```

### 試したこと
「.nav.globalMenuSp」に以下CSSを追記しましたが、変わりませんでした。。
    position: fixed;
　　 overflow-y: scroll;  
    width:100%;
    height:100%;