jQueryで数ピクセルだけズレてしまう

Question

###実現したいこと
タッチパネル、マウス操作の双方に対応した、横スクロールメニューを実装したいです。

###発生している問題
自力で実装してだいたい出来上がってきたのですが、数ピクセルだけズレてしまう問題が解決できません。
下のソースコードとサンプルですが、マウスで右にスクロールしていくと、最後の<li>Xi</li>が数ピクセルだけ見切れてしまうのです。

###該当のソースコード
動作サンプル

<nav class="nav-horizontal root">
  <div class="mask">
	  <div class="list">
		<ul class="target">
		  <li><a href="#" draggable=false>Alpha</a></li>
		  <li><a href="#" draggable=false>Beta</a></li>
		  <li><a href="#" draggable=false>Gamma</a></li>
		  <li><a href="#" draggable=false>Delta</a></li>
		  <li><a href="#" draggable=false>Epsilon</a></li>
		  <li><a href="#" draggable=false>Zeta</a></li>
		  <li><a href="#" draggable=false>Eta</a></li>
		  <li><a href="#" draggable=false>Theta</a></li>
		  <li><a href="#" draggable=false>Iota</a></li>
		  <li><a href="#" draggable=false>Kappa</a></li>
		  <li><a href="#" draggable=false>Lambda</a></li>
		  <li><a href="#" draggable=false>Mu</a></li>
		  <li><a href="#" draggable=false>Nu</a></li>
		  <li><a href="#" draggable=false>Xi</a></li>
		</ul>
	  </div>
  </div>
</nav>

:root {
	--h: 3rem; /* 可視領域の高さ */
}
.nav-horizontal {
	overflow: hidden;
	height: var(--h);
	width: 100%;
	position: relative;
}
.nav-horizontal .mask {
	height: 5em;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch; /* タッチパネル対応 */
	position: relative;
}
.nav-horizontal .list {
	display: inline-table;
	max-width: 100vw;
	overflow-y: scroll;
}
.nav-horizontal .list li {
	display: table-cell;
	background: salmon;
	padding: 5px 10px;
}
.target {
	position: absolute;
	height: var(--h);
	top: 0px;
	background-color: red;
	color: black;
	padding: 0;
	margin: 0;
}

var _isMoving = false; //移動中かどうかのフラグ true:移動中 false:停止中
var _clickX,  _clickY; //クリックされた位置
var _position;         //クリックされた時の要素の位置

//mousedownイベント
$(".target").on("mousedown", function(e) {
	console.clear(); //いったん計測結果を整理
	
	if (_isMoving) return; //移動中の場合は処理しない
	console.log('mousedown しました');

	_isMoving = true; //移動中にする

	//クリックされた座標を保持します
	_clickX = e.screenX;
	_clickY = e.screenY;

	//クリックされた時の要素の座標を保持します
	_position = $(".target").position();
});

//mousemoveイベント
$(".root").on("mousemove", function(e) {
	console.log('mousemove しそうです');
	if (_isMoving == false) return; //移動中でない場合は処理しない
	console.log('mousemove しました');

	//クリックされた時の要素の座標に、移動量を加算したものを、座標として設定します
	const left  = _position.left + e.screenX - _clickX;

	console.log('left =',left);
	console.log('_position =', _position);
	console.log('e.screenX =', e.screenX);
	if( left <=0 ){
		$(".target").css("left", left + "px");
	}

	// 過度なスクロールを戻す
	const w_win = $(window).width();
	const w_ul  = $('.target').width();
	const w_remainder_nav = w_ul + left;
	const w_max_left = w_ul - w_win;
	console.log('w_win =', w_win);
	console.log('w_ul =', w_ul);
	console.log('w_remainder_nav =', w_remainder_nav);
	console.log('w_max_left =', w_max_left);  

	if( w_win - w_remainder_nav > 0 ){
		console.log('過度なスクロールを戻す');
		$(".target").css("left", "-" + w_max_left + "px");
	}
});

//mouseupイベント
$(".target").on("mouseup", function(e) {
	console.log('mouseup しました');  
	_isMoving = false;
	_position = {}; 
});

###試したこと
ズレるということは計測のどこかに誤りがあるということでしょうから見直しました。
まず最終的なズレはw_max_leftに集約されますので、ここに+ 15を加えるとズレなくなりました。

//const w_max_left = w_ul - w_win;
const w_max_left = w_ul - w_win + 15;

そして15pxといえば思い出すのはスクロールばーです。そこでスクロールバーの幅が原因か？とアタリをつけてw_winを次の通り変更しましたが、やはりズレは解消できませんでした。

//const w_win = $(window).width();
const w_win = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

なぜズレてしまうのか、どう解消されるのか、わかる方いらっしゃいませんでしょうか？
宜しくお願い致します。

Comments

[m.ts10806]

下記質問はどうなったのでしょう。
https://teratail.com/questions/323237

[kuragera]

そちらの質問から自分なりにかなり進みましたので、このたび再質問させて頂きました。
編集でなく投稿してしまったので、それはミスです。不慣れなゆえ、どうかご容赦ください。誠に申し訳ございません。削除リクエストを出しておきました。

[m.ts10806]

削除リクエストするより編集したほうが良かったのでは。

[kuragera]

そう思います。編集でなく投稿してしまったので、それはミスです。不慣れなゆえ、どうかご容赦ください。誠に申し訳ございません。

[m.ts10806]

いえ、怒ってるわけじゃないので。

Answer 1

数ピクセルだけ見切れてしまうのです。

ローカルで試してみましたが、再現しませんでした。

ひょっとしたら、jsfiddle特有の現象かもしれませんよ。
jsfiddleのbodyには、margin: 8pxが付いているので、それが原因のような気がします。

Comments

[kuragera]

お試し頂きましてありがとうございます。なるほど。それは気づかなかったです。