CSS posision fixed で上部固定部分が、エッジやＩＥでガタツクのをスムーススクロール解除で回避したら、クロームで挙動が激しくなってしまったのをブラウザ条件分岐での対応記述方法を教えてほ

ワードプレスサイトで

position fixed

を使って、ヘッダーを上部に固定する方法をとっているのですが、

z-index を調整しても、固定部分のガタツキがなおらなかったので、スムーススクロールを解除するという方法を取りました

<script type="text/javascript">

$(function(){
ScrollLength = 700;
ScrollSpeed = 250;

var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(mousewheelevent,function(e){
e.preventDefault();
var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
if (delta < 0){
ScrollSet = $(document).scrollTop()+ScrollLength;
} else {
ScrollSet = $(document).scrollTop()-ScrollLength;
}
$('html,body').stop().animate({scrollTop:ScrollSet},ScrollSpeed);
return false;
});
});
</script>

この記述をヘッダーで行う事で、

ＩＥ、エッジは、それなりにスクロールする事ができました。
ページ内へのリンクも、一応動きました。

ですが、今度はクロームで見たときに、動きが激しくなってしまいました。

閲覧しているブラウザが、クロームの時は、稼働させず、ＩＥやエッジの時だけ稼働させるという条件分岐をしたかったのですが、どう書けば、分岐になるのかがわかりませんでした。

どなたか教えていただけないでしょうか？

行動規範の内容に同意します

回答2件

「ブラウザ条件分岐」で検索したら検索結果が何十件も出てきます。
検索結果を組み合わせるとできると思います。

javascript
1var userAgent = window.navigator.userAgent.toLowerCase();
2if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1 || userAgent.indexOf('edge') != -1) {
3  $(function(){
4    console.log("ＩＥやエッジの時だけ稼働");
5  });
6}

1番めの検索結果を少し直しただけです。

投稿2019/09/14 10:11

querykuma

総合スコア777

bgd6f41

2019/09/14 13:14

ありがとうございます。 var userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1 || userAgent.indexOf('edge') != -1) { $(function(){ console.log("ＩＥやエッジの時だけ稼働"); }); } ＞ＩＥやエッジの時だけ稼働上記の箇所に、 <script type="text/javascript"> $(function(){ ScrollLength = 700; ScrollSpeed = 250; var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; $(document).on(mousewheelevent,function(e){ e.preventDefault(); var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail); if (delta < 0){ ScrollSet = $(document).scrollTop()+ScrollLength; } else { ScrollSet = $(document).scrollTop()-ScrollLength; } $('html,body').stop().animate({scrollTop:ScrollSet},ScrollSpeed); return false; }); }); </script> これを書き込めばいいのでしょうか？プログラムの知識は一切ないので、こんな質問になって申し訳ありません。