{"id":6522,"date":"2010-05-31T07:00:50","date_gmt":"2010-05-31T05:00:50","guid":{"rendered":"http:\/\/funrecycler.com\/?p=6522"},"modified":"2010-05-31T07:00:50","modified_gmt":"2010-05-31T05:00:50","slug":"overflow-y-ueberbreiter-inhalt","status":"publish","type":"post","link":"https:\/\/funrecycler.com\/index.php\/2010\/05\/31\/overflow-y-ueberbreiter-inhalt\/","title":{"rendered":"overflow-y: \u00dcberbreiter Inhalt"},"content":{"rendered":"<p style=\"text-align: left;\">Wer mal in die Verlegenheit kommen sollte, mit CSS und dem <a href=\"http:\/\/de.selfhtml.org\/css\/eigenschaften\/positionierung.htm#overflow\" target=\"_blank\" rel=\"noopener\">overflow<\/a> arbeiten zu d\u00fcrfen, wird sicher ein wenig dr\u00fcber stolpern, wenn die Seite auch auf Safari laufen soll. Ich habe nur so aus Spa\u00df auf dem Android Phone ein eigenes Projekt getestet und konnte keinerlei Scrollbalken entdecken. Alle \u00fcbrigen Browser hatten keine Probleme. Ein <a href=\"http:\/\/chris-barr.com\/entry\/scrolling_a_overflowauto_element_on_a_touch_screen_device\/\" target=\"_blank\" rel=\"noopener\">Beispiel<\/a> im Netz sollte euch Klarheit geben. Mit den verschiedenen Optionen sollten die Scrollbalken so wie auf dem Bild aussehen. Und nun testet mal den <a href=\"http:\/\/www.css4you.de\/example\/overflow-y.html\" target=\"_blank\" rel=\"noopener\">Link<\/a> unter Safari. Vermutlich werdet ihr keine Scrollbalken finden. Die \u00fcblichen Tipps <strong>overflow=auto;<\/strong> funktionierten auch nicht.<br \/>\n<a href=\"http:\/\/funrecycler.com\/wp-content\/uploads\/2010\/05\/screenshot_010.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-6523 aligncenter\" title=\"screenshot_010\" src=\"http:\/\/funrecycler.com\/wp-content\/uploads\/2010\/05\/screenshot_010-300x104.jpg\" alt=\"\" width=\"300\" height=\"104\" \/><\/a><br \/>\nEine m\u00f6gliche L\u00f6sung, die ich gefunden habe, besteht aus ein wenig Javascript und dem richtigen Aufruf im Quellcode.<\/p>\n<pre lang=\"BASH\"> function isTouchDevice(){\n\ttry{\n\t\tdocument.createEvent(\"TouchEvent\");\n\t\treturn true;\n\t}catch(e){\n\t\treturn false;\n\t}\n}<\/pre>\n<pre lang=\"BASH\">function touchScroll(id){\n\tif(isTouchDevice){ \/\/if touch events exist...\n\t\tvar el=document.getElementById(id);\n\t\tvar scrollStartPos=0;\n\t\tdocument.getElementById(id).addEventListener(\"touchstart\", function(event) {\n\t\t\tscrollStartPos=this.scrollTop+event.touches[0].pageY;\n\t\t\tevent.preventDefault();\n\t\t},false);\n\t\tdocument.getElementById(id).addEventListener(\"touchmove\", function(event) {\n\t\t\tthis.scrollTop=scrollStartPos-event.touches[0].pageY;\n\t\t\tevent.preventDefault();\n\t\t},false);\n\t}\n}<\/pre>\n<p>Den ganzen Spa\u00df aktiviert ihr direkt im Body Tag.<\/p>\n<pre lang=\"BASH\">  body onload=\"touchScroll('scrollMe')\"<\/pre>\n<p>Nat\u00fcrlich muss noch die DIV ID an euren Quelltext angepasst werden. Dazu schaut euch einfach den<a href=\"http:\/\/chris-barr.com\/files\/touchScroll.htm\" target=\"_blank\" rel=\"noopener\"> Quelltext des Beispiels<\/a> an.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wer mal in die Verlegenheit kommen sollte, mit CSS und dem overflow arbeiten zu d\u00fcrfen, wird sicher ein<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,20,22],"tags":[1957,2120,2274,2324],"class_list":["post-6522","post","type-post","status-publish","format-standard","hentry","category-computer-und-technik","category-tutorial","category-webseiten","tag-overflow","tag-problem","tag-safari","tag-scrollbar"],"_links":{"self":[{"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/posts\/6522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/comments?post=6522"}],"version-history":[{"count":0,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/posts\/6522\/revisions"}],"wp:attachment":[{"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/media?parent=6522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/categories?post=6522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/tags?post=6522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}