横フリックナビゲーションをプラグイン無しで設置したい

Question

以下の「maxPoint」のようなスマートフォン専用サイトの横フリックナビゲーションをプラグイン無しで設置したいです。
http://hokaccha.github.io/js-flipsnap/demo.html

具体的な構成は以下の通りです。

<div class="hoge">
<ul>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
<li class="固有class名"><a href="#固有id名"><img src="固有URL"><p>固有名詞</p></a></li>
</ul>
</div>

■ご注意点
(1)サンプルの様に要素がきりよく収まるのではなく下記のように見切れることで続きがあることを表現したいです。
https://gyazo.com/5e26595619a5222ce52958ab6dd4b22a
(2)「固有」部分は全て異なるユニークな文字(数)列です。
(3) 特殊環境化であるため以下のメソッドが使用できません。
・eval
・alert
・confirm
・prompt
・top
・self
・parent
・XMLHTTPRequest
・document
・window

以上を踏まえた上でご教授の程よろしくお願い致します。

Answer 1

「プラグイン無しの理由」「特殊環境化の理由」が不明なので明確な回答は致しかねますが、特殊な仕様についてはいくつか回避手段があります。

var window = Function('return this');

<div onclick="var doc = event.target.ownerDocument;">

特殊環境について
何か理由があってそういう特殊環境になっているわけですから、このような小手先の手段が目的に合致するのかまではわかりません。
その仕様にした理由によっては特殊環境を制限緩和する方が良いかもしれません。

Comments

[castail]

ご回答ありがとうございます。

この件に関しては、こちらの知識不足でそもそも仕様自体うまく理解できておりません。
その点を再度依頼者に確認・調べたいと思います。

Answer 2

**「特殊な環境」**についての情報が少なく誤解を招くため、下記の回答になってしまうことを了承願います。

document及びwindowメソッド…function が使用できない「特殊な環境」とのことですが
クライアント側でnew Window() 、new Document() などのJavaScriptのコンストラクタは使用できない。
window.document.getElementById("ID名") などのwindow、documentオブジェクトは使用可能
という認識であっていますか？

一般的にJavaScriptでdocument、windowと記載する場合オブジェクトであると解釈されます。
document、windowは予約後であり、メソッド名には成り得ません。
Document、Windowとした場合はコンストラクタであると解釈されます。
Javaのクラスのインスタンス作成new Document(~~~~~);という使用のされ方を期待しています。

ご存知とは思いますが、javascriptやjQueryでhtmlの要素を取得するために以下のように記述します。

// わざわざ付ける必要が無いため、window を省略するのが普通。
window.document.getElementByClass("class名");
window.$(".class名");
window.jQuery(".class名");

もし、window、documentが使用不可の場合
その特殊な環境でJavaScriptを使用し、要素を取得するにはwindow、documentオブジェクトは代替となるオブジェクトになっており、prototypeを継承している必要があります。

Comments

[castail]

ご回答ありがとうございます。

ご説明が足りず申し訳ありません。

当方プログラムの知識に乏しくあまり状況を把握していないのですが、今回他者が製作した既存サイトへの設置でその環境の仕様の問題ということしかわかりません。

やはり、この条件では実現できないのでしょうか。。

[Ryo]

どうしてもJavaScriptで実装しなければならない場合は、ですが。

CSSでリストを横に並べて、横にはみ出したら、スクロールバーを表示させ
スクロール可能にする。という方法はありますが、
こちらはあまり見た目が宜しくないので何とも言い難いです。

[castail]

レスが遅くなり申し訳ございません。

そちらのCSSのみでの実装は検討したのですがやはりスクロールバーを出したくないので今回のご質問に至りました。。。

[think49]

To: Ryoさん
> window.document.getElementByClass("class名");
×　getElementByClass　/ ○　getElementsByClassName

> クライアント側でnew Window() 、new Document() などのJavaScriptのコンストラクタは使用できない。
new Window は TypeError というのもありますが、仮に new 演算子が使えたとしても新しいインスタンスが生成されるだけで現在の window とは異なるのではないでしょうか。
HTMLDocument を生成するメソッドに createHTMLDocument, DOMParser がありますが、これも新しいドキュメントを生成するだけで既存ドキュメントは参照できません。