Проблема с мобильной прокруткой Safari - чрезмерная прокрутка и резиновая полоса - PullRequest
Новая
       8

Проблема с мобильной прокруткой Safari - чрезмерная прокрутка и резиновая полоса

0 голосов
/ 17 февраля 2019

https://youtu.be/6sPKC7XgFq4

Видео показывает мою проблему.На любом другом устройстве этот сайт прокручивается слева направо, но не вверх и вниз, и прекращает прокрутку в конце содержимого.Как вы можете видеть, в мобильном сафари вся страница свободно перемещается и имеет резинки за пределами границы.Заголовок также немного всплывает.

Я попытался поиграть с тегом overscroll-поведения, но не смог его решить, чтобы решить проблему.При поиске в этом вопросе возникает множество похожих, но неприменимых проблем, поэтому я немного растерялся.Есть идеи?

Теперь я подумываю о том, чтобы протестировать эти старые iPhone 6 или 7.

мой HTML - https://pastebin.com/2Y6L5qXm мой CSS - https://pastebin.com/0KKTKW6b

        <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Enright Design Foundry | Hand-Hammered Graphics Web and Video</title>
    <link href="site.css" rel="stylesheet" type="text/css">
    <script>
    	// http://www.dte.web.id/2013/02/event-mouse-wheel.html
    (function() {
    function scrollHorizontally(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.documentElement.scrollLeft -= (delta*40); // Multiplied by 40
        document.body.scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (window.addEventListener) {
        // IE9, Chrome, Safari, Opera
        window.addEventListener("mousewheel", scrollHorizontally, false);
        // Firefox
        window.addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
        // IE 6/7/8
        window.attachEvent("onmousewheel", scrollHorizontally);
    }
    })();
    		
    	$("body").css("overflow", "hidden");
    	</script>
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/dr-sugiyama:n4:default;carter-one:n4:default;hammersmith-one:n4:default;knewave:n4:default;codystar:n4,n3:default.js" type="text/javascript"></script>
    
    </head>
    
    <body>
    	<header>
    		<div class="headwork">
    			<a>DESIGN</a>
    			<a>LAYOUT</a>
    			<a>WEB</a>
    			<a>VIDEO</a>
    		</div>
    		<div class="headcontact">
    			<a>CONTACT</a>
    		</div>
    	</header>
    	<div class="fswrap">
    		<div class="hero">
    		  <a class="border" href="#pg2">
    	    		<img class="divborderhero" src="images/edge_do.svg" alt="edge border"/>
    			</a>
    		</div>
    		<div class="topl">
    			<a class="border">
        			<img class="divborder" src="images/edge_do.svg" alt="edge border"/>
    			</a>
    			<a class="grow" href="/design.html"><h1>Design</h1></a>
    			<a href="www.google.com"><h1>Layout</h1></a>
    			<a href="www.google.com"><h1>Web</h1></a>
    			<a href="www.google.com"><h1>Video</h1></a>
    		</div>
    		<div class="topmt">
       	    <img src="images/bezcurvelogo.png" alt="Bezier Curve Logo"/> </div>
    	  	<div class="topmb">
    			<h1>Hand Hammered Design</h1>
    	  	</div>
      	  	<div class="topr" id="pg2">
    	    		<img class="divborder" src="images/edge_o.svg" alt="edge border"/>
    	  	</div>
      	  <div class="bottoml"></div>
      	  	<div class="bottomr">
    				<img class="bioarrow" src="images/arrows.svg" alt="arrow"/>
    				<a class="about">
    					
    					I am a creative professional and public affairs expert with six years of honorable naval service. Let me help you take your brand to the next level.
    				</a>
    		</div>
    </div>
    
    
    	</body>
    </html>

Эта страница должна прокручиваться по горизонтали, а не по вертикали и останавливаться, когда она достигает конца содержимого.Общая страница 1vh x 2vw.

...