HTML Seitliches scrollen verbieten?

Hallo, ich möchte gerne bei meiner Website das seitliche scrollen verhindern. Mein Inhalt befindet sich in der mitte. In css habe ich nun overflow-x: hidden. Nun kann man nicht mehr per Scrollbar nach rechts scrollen. Wenn ich jetzt aber auf das Scrollrad klicke (mittlere Maustaste) und meine Maus nach links bewege, scrolle ich trotzdem nach rechts. Genau so auf dem Ipad. Ich kann einfach per touch nach recht scrollen. Nun möchte ich das verhindern. Kann mir jemand helfen?

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

perhp

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

27.01.2016, 21:19

Hallo, dieses Problem mit JavaScript zu lösen ist kompletter Schwachsinn. Der Grund wieso du vertikal scrollen kannst ist, dass deine Inhalte über die 100% der Seite rausgehen. Wenn du dein Styling auf die Elemente richtig anwendest, dann benötigst du kein overflow hidden mehr.

XCreepX

Beitragsersteller

28.01.2016, 16:20

Hm okay, werde ich mal machen. Danke :)

XCreepX

Beitragsersteller

28.01.2016, 16:36

@XCreepX

Funktoniert :) Danke :D

perhp

28.01.2016, 21:32

@XCreepX

Kein Problem :) Alles was du mit CSS und HTML lösen kannst, solltest du auch damit lösen und erst wenn gar nichts mehr geht mit JavaScript.

iBrain

27.01.2016, 18:32

Naja mit HTML kommt man da nicht mehr weit. Du kannst ein disallow mit Java machen.

$(function() {

var $body = $(document);
    $body.bind('scroll', function() {
if ($body.scrollLeft() !== 0) {
            $body.scrollLeft(0);
}
});

});

NackterGerd

24.12.2020, 17:17

Was für ein Unsinn, mit CSS bestimmt man doch die breite der Elemente und des Inhalts. Wenn dieser nur 100% hat dann scrollt auch nichts.

Diese unnötige JS kannst du dir schenken, so würde das nur jemand machen der nicht weiß was er tut

XCreepX

Beitragsersteller

27.01.2016, 18:36

Danke :) Jetzt musst mich aber aufklären :/ Wie mache ich einen disallow wo muss ich das einfügen? :/ Habe keine Ahnung von Java.

iBrain

27.01.2016, 18:43

@XCreepX

Das ist ein Javascript. Den fügst du ein wo du möchtest und zwar in Brackets <javascript>. Alternativ kannst du das auch in eine .js Datei einfügen und einen Dateiverweis machen aber da ich davon ausgehe das du noch nicht soweit bist füge das einfach in Quelltext ein:

<javascript>
$(function() {

var $body = $(document);
 $body.bind('scroll', function() {
if ($body.scrollLeft() !== 0) {
 $body.scrollLeft(0);
}
});

}); 
</javascript>

XCreepX

Beitragsersteller

27.01.2016, 18:56

@iBrain

Habs eingefügt. Ich habe das Left auf Right geändert, da ich nicht nach rechts scrollen will. Jetzt funktoniert es immer noch nicht :/Ich habe es auch mit

$(function() {
var $body = $(document);
$body.bind('scroll', function() {
if ($body.scrollRight() !== 0) {
$body.scrollRight(0);
}
});
});

</script>

versucht. Funktoniert aber auch nicht, genauso wie bei <javascript></javascript> :/

yerooke

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

27.01.2016, 19:33

Solltest du dann nicht deine Seitenstruktur überarbeiten?

Ähnliche Beiträge

HTML/CSS/JS Scrollen verhindern?

Hi Leute,

Ich habe eine Website bei der das Scrollen komplett (sowohl manuell als auch per JS) verhindert werden soll. Mir ist klar das folgende Möglichkeit geht:

overflow: hidden;

Das Problem ist, dass man dann immer noch mit dem Mausrad scrollen kann (siehe hier: http://hoohaadesign.co.uk/#/intro1)

Lässt sich das auch irgendwie verhindern?

Danke im voraus, Marvin

...zum Beitrag

Meine Website per Html und CSS geht zu weit nach rechts. baujanssen.de Ich kann den scrollbalken auf der x-ebene nur verbieten. Wieso?

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zum Beitrag

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

HTML Img responsive overflow?

Hallo Liebe Community,

ich habe eine kurze Frage. Ich habe in meinem

HTML Code ein img eingefügt und es mittig zentriert und die breite auf 100% gesetzt. Zudem ist dieses Bild 100vh hoch. Sobald ich die Seite kleiner mache vergrößert sich das Bild, da die 100vh ja gefüllt werden müssen. Soweit so gut. Nun wenn ich auf Safari oder Chrome auf das responsive tool gehe, öffne ich zb die Ansicht eines iPhones und kann immer bei dem img ein Stückchen nach rechts scrollen. Scroll ich aber 100vh runter, richtet sich die Seite wieder mittig aus also springt wieder zurück. Ich hab’s versucht mit overflow hidden und max width 100% im html Bzw Body css aber nichts von beiden hat funktioniert. Wie behebe ich das?

vielen Dank im Voraus

...zum Beitrag

Wieso kann man nach rechts scrollen, obwohl ich es unterbinde?

Ich bin am responsiven Design einer Webseite dran, und habe overflow-x: hidden; . da stehen. Trotzdem kann man am Handy nach rechts scrollen? Wieso? Auch die anderen Sachen von overflow: gehen nicht. Kann wer helfen? .-.

...zum Beitrag

Mittlere Maustaste zum scrollen wie mit Finger auf Touch?

Hi :)

Mich stört es schon länger, dass man für Browser keine vernünftige Funktion hat um präzise horizontal zu scrollen. Hoch/runter geht relativ gut mit dem Scrollrad, aber wenn man in Internetseiten reinzoomt oder eine Seite besonders breit angezeigt wird (was gerne mal bei Dokumenten oder Fotos passiert), dann hat man meines Wissens nach nur 2 Möglichkeiten: Den Scrollbalken am unteren Bildschirmrand zu nutzen oder auf die mittlere Maustaste drücken und dann mit der Maus durch Bewegen in die entsprechende Richtung zu scrollen. Das erste ist in der Praxis sehr umständlich und das zweite für meinen Geschmack zu unpräzise und nicht viel weniger unpraktisch.

Daher hab ich mich gefragt: Viele CAD- und Bildbearbeitungsprogramme haben die Funktion, dass wenn ich die mittlere oder rechte Maustaste (je nach Programm und Einstellung) gedrückt halte, dann "greift" die Maus den Punkt auf dem Blatt und man kann den Punkt direkt verschieben. Ähnlich also wie auf einem Touchscreen, wenn man mit dem Finger einen Punkt festhält und den dann verschiebt.

Gibt es eine Möglichkeit so eine Funktion auch mit der Maus auf der mittleren Maustaste im Browser zu haben? Wenn ich sie also gedrückt halte, dass ich dann in alle Richtungen den Bildschirminhalt verschieben kann. Ich konnte dazu weder was in den Chrome-Settings als in der Software meiner Maus finden (Logitech MX Master 3s). Auch eine jetzt schon längere Internetsuche war eher fruchtlos.

Und ja, ich weiß das meine Maus ein zusätzliches seitliches Scrollrad hat. Und nein, ich möchte das dafür nicht nutzen, da ich dem schon andere Funktionen zugewiesen habe die ich regelmäßig nutze und das seitliche Scrollen nur hin und wieder gebraucht wird. Zumal ich die Funktion mit Festhalten der mittleren Maustaste als deutlich angenehmer und präziser empfinde als mit den beiden Mausrädern zu navigieren. Und für unterwegs nutze ich meine kleine und mobile Maus, die hat nur ein Rad und soll die Funktion auch nutzen können.

Würde mich über jegliche Lösung freuen :)

...zum Beitrag

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zum Beitrag

Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Warum werden nicht alle Bilder in einem "versteckt" (overflow: hidden;)?

Guten Tag liebe Community,

ich bin dabei, einen Slider zu bauen und leider "versteckt" sich nur ein Bild in einem. Das dritte Bild bleibt wie schon davor nur in seiner Position. Liegt das eventuell an dem <img>?

Beim ersten <img>: picture1.jpg.jpg
Beim zweiten <img>: picture2.jpg.jpg
Beim dritten <img>: o233-ai4Q4-unsp.jpg -> hier ganz anderer Name

Welche Lösungen gibt es für dieses Problem?

Hier der wichtigste (Teil-)Code:

Der CSS-Code:

.Slider {
  width: 800px;
  height: 500px;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

HTML-Code (ein Teil):

<div class="Slider">
  <div class="Slides">
    <input type="radio" name="radio-btn" id="radio1">
    <input type="radio" name="radio-btn" id="radio2">
    <input type="radio" name="radio-btn" id="radio3">
    <div class="slidefirst">
      <img src="picture1.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidesecond">
      <img src="picture2.jpg.jpg" alt="" width="160" height="145" />
    </div>
    <div class="slidethird">
      <img src="o233-ai4Q4-unsp.jpg" alt="" width="160" height="145" />
    </div>
    <div class="navigation auto">
      <div class="auto-btn-1"></div>
      <div class="auto-btn-2"></div>
      <div class="auto-btn-3"></div>
    </div>

...zum Beitrag

dieser Fehler in der css: "at-rule or selector expected"?

Hallo Ich habe diesen Fehler in meinem css, jemand weiß, wie man dieses Problem zu behebt? Wie auf dem Bild zu sehen ist, steht da "at-rule or selector expected", aber nach mehreren Versuchen weiß ich nicht, wie ich das Problem lösen kann. Bitte um Hilfe.

@charset "UTF-8"; 
{
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: Inter;
}
.v73_77 {
  width: 595px;
  height: 842px;
  background: rgba(255,255,255,1);
  opacity: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}
.v73_79 {
  width: 451px;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 139px;
  left: 53px;
  font-family: Inter;
  font-weight: Regular;
  font-size: 12px;
  opacity: 1;
  text-align: left;
}
.v73_80 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 28px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}
.v73_81 {
  width: 160px;
  height: 160px;
  background: rgba(255,243,236,0);
  opacity: 1;
  position: absolute;
  top: 228px;
  left: 213px;
  border: 1px solid rgba(255,117,51,1);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  overflow: hidden;
}

...zum Beitrag

Overflow verhindern HTML,CSS,js?

...zum Beitrag

HTML Bilder kopieren per Drag-and-drop verhindern

Ich bin gerade dabei ein Website zu erstellen. Um ein paar spezielle Funktionen zu realisieren muss das Javascript erkennen können, wenn ein Nutzer die linke Maustaste auf einem Bild drückt, dann die Maus verschiebt und dann die Maustaste los lässt. Das Problem an der Sache ist, dass der Browser versucht das Bild zu verschieben und somit die gewünschten Aktionen nicht erkennt. Gibt es eine Möglichkeit dieses "Verschieben" zu verhindern?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen