Question

视频显示了我的问题。在任何其他设备上，此站点从左向右滚动，但不上下滚动，并且将在内容末尾停止滚动。如您所见，在移动浏览器中，整个页面都是自由浮动的，橡皮筋超出了边界区域的边缘。标头也浮动了一点。

我尝试使用overscroll-behavior标签，但无法解决该问题。在这个问题上使用Google搜索时会遇到很多类似但不适用的问题，因此我有点茫然。有什么想法吗？

现在我正在考虑使用旧的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。

移动Safari滚动问题-过度滚动和橡皮筋

0 个答案: