#javascript #html #css #web
Вопрос:
Как вы можете видеть, это HTML-код для моего контейнера. Я хочу прокрутить эту часть, но это не работает.
// This is the javascript for the slider function function slideRight() { var serviceCatalogue = document.getElementById('scroller'); serviceCatalogue.scrollLeft = 1400 } /* And this is the CSS for the conatiner. */ .conatiner { border: 1px solid black; width: 1000000000px; /* overflow: scroll; */ height: 500px; overflow-x: scroll; } lt;div class="conatiner" id="scroller"gt; lt;i style=" position:absolute; right: 50px; margin-top: 100px;" class="fas fa-arrow-right"gt; lt;/igt; lt;button id="left-button" swipe left lt;/buttongt; lt;button id="right-button"gt; swipe right lt;/buttongt; lt;/divgt; Комментарии:
1. Вопрос нуждается в деталях/ясности. Что именно вы пытаетесь здесь сделать?
2. отсутствует gt; в gt;lt;идентификатор кнопки=»левая кнопка» проведите пальцем влево lt;/кнопкаgt;
Ответ №1:
Я думаю, что проблема в том, что у .conatiner вас недостаточно элементов, чтобы переполнить его
например, в приведенном ниже коде #conatiner #content размер, превышающий ширину содержимого parrent#, составляет 500 пикселей, а у conatiner-400 пикселей
и это работает просто отлично
const button = document.getElementById('slide'); button.onclick = function () { document.getElementById('container').scrollLeft = 20; }; #container { width: 400px; height: 500px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 500px; background-color: #ccc; } lt;div id="container"gt; lt;div id="content"gt;Click the button to slide right!lt;/divgt; lt;button id="slide" type="button"gt;Slide rightlt;/buttongt; lt;/divgt; Комментарии:
1. я сделал, но он все еще не работает, мой код содержимого .содержимое{ позиция: абсолютная; высота: 350 пикселей; ширина: 270 пикселей; слева: 100 пикселей; /* дисплей: встроенный блок; */ граница: 1 пиксель сплошной черный; }
2. @Prashantswami вы, кажется, смущены 2 вещами. Сначала, когда вы говорите .conatiner {ширина: 1000000000 пикселей;}, вы переполняете элемент тела. таким образом, полоса прокрутки, которую вы видите, предназначена для тела или родительского элемента .container в других словах, эта полоса прокрутки не принадлежит .container, поэтому вы не можете прокручивать ее. 2-я вещь, которую вы путаете, заключается в том, что для переполнения .container внутри должно быть достаточно ширины элемента, которая больше, чем .container, поэтому, когда вы говорите .content{ширина: 270 пикселей;} недостаточно, потому что .container равен 1000000 пикселей, и еще одна вещь, удаление позиции не будет работать
3. можете ли вы помочь мне с этим, я хочу добавить слайдер ко всему контейнеру,например ,если я нажму, div сдвинется влево, и появятся следующие три. я хочу выполнить это.
4. @Prashantswami я не совсем понимаю, чего ты хочешь. если вам нужен слайдер (карусель), в Интернете есть сотни бесплатных кодов для него.